如何使用 CSS 對圖片元素實現「background-size: cover」和「background-size: contains」效果？

實現影像元素的背景大小屬性

現代CSS 提供了一種以與背景大小類似的方式顯示影像的方法： cover和background-size：包含背景圖像的屬性。

解決方案 1：object-fit屬性

對於支援物件適配的瀏覽器，此屬性允許無縫複製影像元素上的背景大小行為。只需將以下 CSS 加入您的圖片：

body {
  margin: 0;
}

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

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