CSS中可以使用background-size屬性控制背景圖片的大小,讓圖片適應當前元素的大小。不過,它只對背景圖片有效,如果我們需要控制一張img標簽中的圖片大小,該怎么辦呢?
其實可以通過設置圖片的寬度和高度來實現這個目的。但是,如果我們僅僅設置其中一個值,圖片會按比例縮放,導致圖片變形,不美觀。所以,我們需要使用CSS3中的object-fit屬性來控制圖片的形狀,讓圖片按比例縮放,不變形。
object-fit屬性有以下幾個取值:
object-fit:fill; /*默認值,拉伸圖片以填充元素*/ object-fit:contain; /*縮小圖片以適應元素*/ object-fit:cover; /*拉伸圖片以完全覆蓋元素*/ object-fit:none; /*按圖片原始大小顯示,超出元素部分不顯示。*/ object-fit:scale-down; /*object-fit: contain(縮小圖片以適應元素)和object-fit:none(按圖片原始大小顯示,超出元素部分不顯示)中,選取尺寸較小的值。*/
比如,我們想要讓圖片縮小以適應元素,同時保持圖片不變形,我們可以這樣設置:
img{ width: 100%; height: 100%; object-fit: contain; }
這里我們將img的寬度和高度設置為100%(根據所在元素自適應),然后將object-fit設置為contain,這樣圖片就按比例縮放,適應元素。如果我們想要拉伸圖片以填充元素,可以將object-fit設置為fill。
總的來說,使用object-fit屬性可以輕松控制圖片的形狀,不需要再像以前一樣,在CSS中設置圖片寬度和高度,不停調整,讓圖片不變形。使用object-fit,我們可以更專注于頁面布局和樣式。
上一篇css圖片跑馬燈