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