一行css代碼解決圖片統(tǒng)一大小后的拉伸問題(object-fit)

2024-07-11 08:42:03

字體：大中小

供稿：網(wǎng)友

一、先來個實(shí)戰(zhàn)

1. 測試案例

需求: 要求表情庫里所有表情包大小都固定

實(shí)際效果: 由于圖片原始大小都不一樣,強(qiáng)行設(shè)定大小值會導(dǎo)致拉伸,如果不設(shè)定大小則參差不齊。例如:

//html<body>    <img src="1.jpg" />    <img src="2.jpg" />    <img src="3.jpg" />    ....</body>//cssimg{    width: 80px;    height: 80px;    margin-right: 10px;}

2. 解決方法

大多數(shù)都是利用background-size: cover 來避免對圖片造成的壓縮或者拉伸。

小巧而強(qiáng)大的object-fit

object-fit似乎是被人忽視的一個CSS3屬性。因?yàn)榇嬖诩嫒菪?所以沒有background-size好用,但是由于某種情況,你不得不用img標(biāo)簽來引入圖片,這時候用object-fit是很好的選擇。

CSS3 background-size出現(xiàn)的比較早，大家應(yīng)該知道其支持的一些值，除了數(shù)值之外，其還支持幾個關(guān)鍵字，例如：cover, contain等。

object-fit也是類似的，但還是有些差異，具體有5個值：

.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }

fill: 中文釋義“填充”。默認(rèn)值。替換內(nèi)容拉伸填滿整個content box, 不保證保持原有的比例。

contain: 中文釋義“包含”。保持原有尺寸比例。保證替換內(nèi)容尺寸一定可以在容器里面放得下。因此，此參數(shù)可能會在容器內(nèi)留下空白。

cover: 中文釋義“覆蓋”。保持原有尺寸比例。保證替換內(nèi)容尺寸一定大于容器尺寸，寬度和高度至少有一個和容器一致。因此，此參數(shù)可能會讓替換內(nèi)容（如圖片）部分區(qū)域不可見。

none: 中文釋義“無”。保持原有尺寸比例。同時保持替換內(nèi)容原始尺寸大小。

scale-down: 縮放，以適應(yīng)顯示區(qū)域，當(dāng)顯示區(qū)域小于圖片大小時，圖片被縮放；當(dāng)顯示區(qū)域大于圖片大小時表現(xiàn)為圖片正常的大小，效果和none一致

我們給上圖所有img都統(tǒng)一加上object-fit: cover;屬性,看看效果:

完美解決！真的很方便,只需要一行css

我們具體學(xué)一下object-fit

屬性	描述
fill	默認(rèn)值。整個對象將完全填充此框。如果對象的高寬比不匹配其框的寬高比，那么該對象將被拉伸以適應(yīng)。
contain	整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加“黑邊”。
cover	被替換的內(nèi)容大小保持其寬高比，同時填充元素的整個內(nèi)容框。如果對象的寬高比與盒子的寬高比不匹配，該對象將被剪裁以適應(yīng)。
none	內(nèi)容尺寸不會被改變。
scale-down	內(nèi)容的尺寸就像是指定了none或contain，默認(rèn)應(yīng)用尺寸最小的值

我們用一張圖片作為例子解析以上上面各個屬性:

//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>//cssbody 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: 默認(rèn)值,和未設(shè)置一樣。會將圖片壓縮拉伸
contain: 當(dāng)寬/高的值達(dá)到父容器規(guī)定的最小寬/高時,則對應(yīng)的另一個值會按照原始寬高比進(jìn)行生成。例如上面,圖片的高度達(dá)到父容器高度后,寬度按照比例生成,導(dǎo)致左右留白
cover: 和contain不一樣,cover是以最大值為規(guī)定的。例如上圖,圖片的高度(較小值)首先達(dá)到父容器高度后,而寬度并未達(dá)到父容器的寬度,圖片會繼續(xù)'生長',直到寬度達(dá)到和父容器寬度一致。而等比伸縮的高度會溢出,溢出部分裁剪
none: 顧名思義寬高對圖片不起作用,即使設(shè)置了固定的寬高,圖片仍然以原始大小展現(xiàn),但是超出設(shè)置的值會被遮擋
scale-down: 以contain或none圖片最小尺寸為標(biāo)準(zhǔn).

以上就是object-fit的全部用法。

很簡單,但是很強(qiáng)大

當(dāng)然,也可以用background-size解決圖片伸縮問題

例如淘寶網(wǎng):