覆蓋整個頁面的響應式圖像

Question

我正在嘗試將圖像添加到我的網站頁面以覆蓋任何屏幕尺寸的整個頁面

 *{ padding:0px; margin:0px; } img { width:100%; object-fit:cover; max-width: 100%; min-height: 100%; min-width: 100%; }

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <div class="responsive"> <a href="#" ><img src="img/d.png"> </a> </div>

該代碼適用於桌面，但對於移動設備，某些圖像無法覆蓋 100% 的屏幕寬度。

Answer 1

body 應該有一些高度和寬度，以便圖像從父級繼承高度。 在單位中使用 % 表示相對於父級。 因此，父元素也應該有寬度和高度。

body {
  width: 100%;
  height: 100vh;
}

.responsive {
  width: 100%;
  height: 100%;
}