1. 測試案例
- 需求: 要求表情庫裡所有表情包大小都固定
- 實際效果: 由于圖檔原始大小都不一樣,強行設定大小值會導緻拉伸,如果不設定大小則參差不齊。例如:
//html
<body>
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
....
</body>
//css
img{
width: 80px;
height: 80px;
margin-right: 10px;
} 
2. 解決方法
大多數都是利用 background-size: cover
小巧而強大的object-fit
object-fit似乎是被人忽視的一個CSS3屬性。因為存在相容性,是以沒有
background-size
好用,但是由于某種情況,你不得不用
img
标簽來引入圖檔,這時候用
object-fit
是很好的選擇。
我們給上圖所有img都統一加上
object-fit: cover;
屬性,看看效果:
完美解決！真的很友善,隻需要一行css
我們具體學一下object-fit
| 屬性 | 描述 |
|---|---|
| fill | 預設值。整個對象将完全填充此框。 如果對象的高寬比不比對其框的寬高比，那麼該對象将被拉伸以适應。 |
| contain | 整個對象在填充盒子的同時保留其長寬比，是以如果寬高比與框的寬高比不比對，該對象将被添加“黑邊”。 |
| cover | 被替換的内容大小保持其寬高比，同時填充元素的整個内容框。 如果對象的寬高比與盒子的寬高比不比對，該對象将被剪裁以适應。 |
| none | 内容尺寸不會被改變。 |
| scale-down | 内容的尺寸就像是指定了none或contain，預設應用尺寸最小的值 |
我們用一張圖檔作為例子解析以上上面各個屬性:
//html
<div>
<img src="./public/test.jpg" class="initImg"/>
<p>圖檔初始化</p>
</div>
<div>
<img src="./public/test.jpg" class="initImg fillImg"/>
<p>object-fit:fill</p>
</div>
<div>
<img src="./public/test.jpg" class="initImg containImg"/>
<p>object-fit:contain</p>
</div>
</br>
<div>
<img src="./public/test.jpg" class="initImg coverImg"/>
<p>object-fit:cover</p>
</div>
<div>
<img src="./public/test.jpg" class="initImg noneImg"/>
<p>object-fit:none</p>
</div>
<div>
<img src="./public/test.jpg" class="initImg scaleDownImg"/>
<p>object-fit:scale-down</p>
</div>
//css
body div{
display: inline-block;
text-align: center;
}
.initImg{
width: 150px;
height: 80px;
}
.fillImg{
object-fit: fill;
}
.containImg{
object-fit: contain;
}
.coverImg{
object-fit: cover;
}
.noneImg{
object-fit: none;
}
.scaleDownImg{
object-fit: scale-down;
} 這裡稍微解釋一下:
- fill: 預設值,和未設定一樣。會将圖檔壓縮拉伸
- contain: 當寬/高的值達到父容器規定的最小寬/高時,則對應的另一個值會按照原始寬高比進行生成。例如上面,圖檔的高度達到父容器高度後,寬度按照比例生成,導緻左右留白
- cover: 和
contain
- none: 顧名思義寬高對圖檔不起作用,即使設定了固定的寬高,圖檔仍然以原始大小展現,但是超出設定的值會被遮擋
- scale-down: 以
contain
none
以上就是object-fit的全部用法。
很簡單,但是很強大
當然,也可以用
background-size
解決圖檔伸縮問題
例如淘寶網:
當從文章提取的圖檔和文章list的展示塊尺寸比例不一緻的時候，背景圖可通過指定
background-size:contain | cover
來避免對圖檔造成的壓縮或者拉伸。