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

在我們網站更新文章的時候，經常會插入圖片，豐富資訊。但是我們插入的圖片長寬比例並不一定是固定的。我們在呼叫縮圖的時候，常常會出現圖片變形的情況，高和寬不成比例。那麼如何讓圖片不變形，又能鋪滿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值含義為保持原有尺寸比例。但部分內容可能被剪下。