在檢查網站的時候發現圖片給於固定寬的時候,會壓縮變形,要保證,img元素不變形,寬高比不變。從別人那裏瞭解到object-fit,之前從未用過,因此就總結給本身看看,理解一下。css
object-fit css屬性指定可替換元素的內容應該如何適應到其使用高度和寬度肯定的框內。
網站
object-fit 的語法:spa
object-fit屬性 fill | contain | cover | none | scale-down對象
fill 中文釋義「填充」,默認值。替換的內容正好填充元素的內容寬,替換內容拉伸填滿整個content box,不保證保持原有的比例。blog
contain 中文釋義「包含」。保持原有的尺寸比例。保證替換內容尺寸必定能夠在容器裏面放得下。所以,此參數可能在容器內一下空白。圖片
cover 中文釋義「覆蓋」。保持原有的尺寸比例。保證替換內容尺寸必定大於容器尺寸,寬度和高度至少有一個和容器一致。所以,此參數可能會讓替換內容部分區域不可見。it
none 中文釋義「無」。保持原有的尺寸比例。同時保持替換內容原始尺寸大小。class
scale-down 中文釋義「下降」。內容的尺寸與none或contain中的一個相同,取決於它們之間誰獲得的對象尺寸會更小。容器
原圖圖片:object
容器的寬高是200px,背景爲粉色,css代碼以下:
.container li{display: inline-block;}
.box { width: 200px; height: 200px; margin: 10px 0 20px; background-color: pink; overflow: hidden; resize: both;}
.box>img{width: 100%;height: 100%;}
.fill{object-fit: fill;}
.contain{object-fit: contain;}
.cover{object-fit: cover;}
.none{object-fit: none;}
.scale-down{object-fit: scale-down;}
各個屬性顯示樣式:
綜上所述,object-fit:contain和object-fit:scake-down的表現是一致的。可是當容器的尺寸拉伸到比圖片實際尺寸還要大時,效果與none一致。【注:留白的部分給圖片加上】