HTML圖片鋪滿div元素不變形,超出部分隱藏,保留中心部分css程式碼

webcc發表於2024-07-02

在我們網站更新文章的時候,經常會插入圖片,豐富資訊。但是我們插入的圖片長寬比例並不一定是固定的。我們在呼叫縮圖的時候,常常會出現圖片變形的情況,高和寬不成比例。那麼如何讓圖片不變形,又能鋪滿div元素呢?

我們可以使用css程式碼中object-fit屬性來實現。

object-fit屬性指定元素的內容應該如何去適應指定容器的高度與寬度。

css程式碼如下:

.div{
width:200px;
height: 200px;
overflow:hidden;
}
.div img{
width:100%;
height: 100%;
object-fit: cover;//重要
}

css程式碼中,cover值含義為保持原有尺寸比例。但部分內容可能被剪下。

相關文章