如何使用HTML和CSS實作圖片的「background-size: cover」和「background-size: contains」效果？

顯示具有相當於“background-size: cover”和“background-size: contains”屬性的圖像

您的擔憂來自於希望在HTML 文件中顯示具有與背景影像的「background-size: cover」CSS 屬性相同屬性的影像。您已嘗試對 div 元素中的圖像使用“width: 100%”和“width: auto”樣式，但由於螢幕尺寸變化而遇到響應能力限制和不良行為。

解決方案 #1 ：object-fit 屬性（有限瀏覽器支援）

「object-fit」屬性是專門為此目的而設計的。透過設定「object-fit: cover;」在 img 元素上，您可以實現所需的行為，使影像填滿可用空間，同時保持其縱橫比。但請務必注意，Internet Explorer 不支援此屬性。

範例：

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

<img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />

以上是如何使用HTML和CSS實作圖片的「background-size: cover」和「background-size: contains」效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！