首頁 > web前端 > css教學 > 如何使用HTML和CSS實作圖片的「background-size: cover」和「background-size: contains」效果?

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

Linda Hamilton
發布: 2024-12-28 07:16:35
原創
800 人瀏覽過

How Can I Achieve the

顯示具有相當於“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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板