ブラウザのサイズに基づいて解像度を自動的に調整するフルサイズの画像
<p>配送用のウェブサイトを持っています。 </p>
<p>コンピュータ画面の解像度に依存せずに、ホバー画像を画面全体に表示するにはどうすればよいですか。ブラウザウィンドウを縮小すると、それらもトリミングされて縮小されるはずです。ありがとう。 </p>
<pre class="brush:php;toolbar:false;">.hover-image {
ディスプレイ: フレックス;
位置: 固定;
トップ: 50%;
左: 50%。
変換: 変換(-50%, -50%);
z インデックス: -1;
ポインターイベント: なし。
フレックス方向: 列;
整列項目: 中央;
コンテンツの位置揃え: 中央;
/* 幅と高さを拡大縮小された画像に変更します */
幅: 100vw;
高さ: 自動;
}
.hover-image img {
最大幅: 100% !重要;
最大高さ: 100% !重要;
幅: 自動!重要;
高さ: 自動!重要;
マージンボトム: 0;
}</pre>
画像ホバー 1
{画像1}
画像ホバー 2
{画像2}
<p>ピクセルを使用してみましたが、それは解像度に依存します。 </p>
