ブラウザのサイズに基づいて解像度を自動的に調整するフルサイズの画像

Question

配送用のウェブサイトを持っています。

コンピュータ画面の解像度に依存せずに、ホバー画像を画面全体に表示するにはどうすればよいですか。ブラウザウィンドウを縮小すると、それらもトリミングされて縮小されるはずです。ありがとう。

.hover-image {
   ディスプレイ: フレックス;
   位置: 固定;
   トップ: 50%;
   左: 50%。
   変換: 変換(-50%, -50%);
   z インデックス: -1;
   ポインターイベント: なし。
   フレックス方向: 列;
   整列項目: 中央;
   コンテンツの位置揃え: 中央;

/* 幅と高さを拡大縮小された画像に変更します */
      幅: 100vw;
   高さ: 自動;
}

.hover-image img {
    最大幅: 100% !重要;
    最大高さ: 100% !重要;
    幅: 自動!重要;
    高さ: 自動!重要;
    マージンボトム: 0;
}

画像ホバー 1 {画像1} 画像ホバー 2 {画像2}

ピクセルを使用してみましたが、それは解像度に依存します。

Answer 1

この CSS コードにより、マウスオーバー時の画像がアスペクト比を維持しながら画面全体をカバーします。画像は必要に応じてトリミングされ、ブラウザ ウィンドウのサイズが変更されるときに調整されます。コンテナーは固定位置とフレックス配置を使用して中央に表示しますが、object-fit: cover によりトリミングが保証されます。

リーリー リーリー