前言

之前我寫過一篇開發(fā)筆記
圖片比例縮放且不超出范圍
里面使用了object-fit的contain，現(xiàn)在我來總結(jié)一下相關(guān)的理論。

object以及替換元素

object

object-fit和object-position里面都出現(xiàn)了object，這個object是什么呢？多方了解(MDN)，其實(shí)這個object是指的替換元素(Replaced element)

MDN
object-fit
object-position

替換元素(Replaced element)

同樣給個MDN Replaced element

替換元素(Replaced element)其內(nèi)容不受CSS視覺格式化模型控制的元素,比如image,嵌入的文檔(iframe之類)或者applet,叫做替換元素。比如,img元素的內(nèi)容通常會被其src屬性指定的圖像替換掉。替換元素通常有其固有的尺寸:一個固有的寬度,一個固有的高度和一個固有的比率。比如一幅位圖有固有用絕對單位指定的寬度和高度,從而也有固有的寬高比率。另一方面,其他文檔也可能沒有固有的尺寸,比如一個空白的html文檔。

CSS渲染模型不考慮替換元素內(nèi)容的渲染。這些替換元素的展現(xiàn)獨(dú)立于CSS。object,video,textarea,input也是替換元素,audio和canvas在某些特定情形下為替換元素。使用CSS的content屬性插入的對象是匿名替換元素。

object-fit和object-position出現(xiàn)的理由

一個東西總要有它的應(yīng)用場景吧？ 從個人而言我遇到過兩種情況需要使用這個屬性。

固定大小的容器保持圖片比例

這個其實(shí)就是我之前博客里面寫的圖片比例縮放且不超出范圍

結(jié)果圖

下面是未做處理的情況。

原始圖

由于這個卡片上面的圖片是用戶上傳的，其寬高和比例不確定，而需求要求是圖片必須按比例縮放，不能像上面的原始圖一樣直接拉伸。盡管我當(dāng)時不是使用的object-fit來實(shí)現(xiàn)的，但它也適用于使用object-fit的情況。

富文本顯示

之前顯示富文本的時候由于忘記做處理，大圖會直接溢出

問題圖片

然后我使用了object-fit: contain;（當(dāng)然不止這一句）

修正后

不過這樣之后有個問題，就是我以前那些小圖也被擴(kuò)大到最大了，這就尷尬了。

bug

不過改成object-fit: scale-down 就沒這個問題了。

image.png

//示意寫法
img {
    object-fit: scale-down;
    height: 100%;
    width: 100%;
}

不過這樣還是有個缺點(diǎn)就是本來圖片后面跟著文字的，直接擠到下一行去了，不過簡書也是這樣的我也不管了（逃）

object-fit

下面正式介紹兩個屬性了
首先是object-fit
可選的值有

/* Keyword values */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: unset;

解釋如下

• fill: 默認(rèn)值。替換內(nèi)容拉伸填滿整個content box, 不保證保持原有的比例。
• contain: 保持原有尺寸比例。保證替換內(nèi)容尺寸一定可以在容器里面放得下。因此，此參數(shù)可能會在容器內(nèi)留下空白。
• cover: 保持原有尺寸比例。保證替換內(nèi)容尺寸一定大于容器尺寸，寬度和高度至少有一個和容器一致。因此，此參數(shù)可能會讓替換內(nèi)容（如圖片）部分區(qū)域不可見。相當(dāng)于是你有一個100100的容器，但放了個100200的圖片，那么它會顯示成200*200。
• none: 保持原有尺寸比例。同時保持替換內(nèi)容原始尺寸大小。
• scale-down: 可以參考我上面說的第二個例子，就好像依次設(shè)置了none或contain, 最終呈現(xiàn)的是尺寸比較小的那個。

注意 img上都是{ width: 100%; height: 100%; }

為什么我設(shè)置了width和height但除了fill之外都無視了

1. img是個元素，且是個替換元素，這個通過上面的學(xué)習(xí)應(yīng)該都知道；

2. 一個圖片，如果沒有src，它依然是個替換元素，它在瀏覽器中的解析依然是正確的；

3. src指向的圖片屬于替換內(nèi)容，注意，這個替換內(nèi)容和這個img替換元素是殼子與內(nèi)容的關(guān)系，兩者是獨(dú)立的。在CSS2.1時代，殼子的實(shí)際尺寸（如果沒有CSS或HTML設(shè)置），則是跟隨內(nèi)容的實(shí)際尺寸，因此，網(wǎng)頁加載的時候，我們會看到圖片占據(jù)的高度從0到圖片實(shí)際高度跳動的過程；如果殼子，也就是img有尺寸限制，則替換內(nèi)容fill拉伸適應(yīng)于 img替換元素的設(shè)定尺寸?？偠灾?，殼子與內(nèi)容的尺寸永遠(yuǎn)是一樣的。于是，我們就會誤認(rèn)為圖片就是那個圖片，唯一的存在，導(dǎo)致我們理解object-fit的特性表現(xiàn)出現(xiàn)了障礙。

4. 在CSS3時代，object-fit的世界里，object-fit控制的永遠(yuǎn)是替換內(nèi)容的尺寸表現(xiàn)，注意，是替換內(nèi)容的尺寸表現(xiàn)，不是img替換元素。或者這么講吧，我們對img設(shè)置：
   .box > img { width: 100%; height: 100%; }
   實(shí)際上是控制img這個元素的，這個殼子的尺寸是100%撐滿容器。上面截圖的5個示例的圖片實(shí)際上都是100%拉伸與容器的；之所以實(shí)際的圖片內(nèi)容沒有拉伸，是因為受object-fit控制，object-fit控制了src對應(yīng)的替換內(nèi)容的尺寸，或者包含，或者覆蓋。

object-position

這個就簡單多了

/* <position> values */
object-position: 100px 50px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;

position可以填很多比如left top right bottom還有百分比等等，用來控制替換元素位置的。

下次

明天做一下CSS視覺化模型的總結(jié)吧