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