前言
之前我寫過一篇開發筆記
圖片比例縮放且不超出范圍
里面使用了object-fit的contain，現在我來總結一下相關的理論。
object以及替換元素
object
object-fit和object-position里面都出現了object，這個object是什么呢？多方了解(MDN)，其實這個object是指的替換元素(Replaced element)
替換元素(Replaced element)
同樣給個MDN Replaced element
替換元素(Replaced element)其內容不受CSS視覺格式化模型控制的元素,比如image,嵌入的文檔(iframe之類)或者applet,叫做替換元素。比如,img元素的內容通常會被其src屬性指定的圖像替換掉。替換元素通常有其固有的尺寸:一個固有的寬度,一個固有的高度和一個固有的比率。比如一幅位圖有固有用絕對單位指定的寬度和高度,從而也有固有的寬高比率。另一方面,其他文檔也可能沒有固有的尺寸,比如一個空白的html文檔。
CSS渲染模型不考慮替換元素內容的渲染。這些替換元素的展現獨立于CSS。object,video,textarea,input也是替換元素,audio和canvas在某些特定情形下為替換元素。使用CSS的content屬性插入的對象是匿名替換元素。
object-fit和object-position出現的理由
一個東西總要有它的應用場景吧？ 從個人而言我遇到過兩種情況需要使用這個屬性。
固定大小的容器保持圖片比例
這個其實就是我之前博客里面寫的圖片比例縮放且不超出范圍
下面是未做處理的情況。
由于這個卡片上面的圖片是用戶上傳的，其寬高和比例不確定，而需求要求是圖片必須按比例縮放，不能像上面的原始圖一樣直接拉伸。盡管我當時不是使用的object-fit來實現的，但它也適用于使用object-fit的情況。
富文本顯示
之前顯示富文本的時候由于忘記做處理，大圖會直接溢出
然后我使用了object-fit: contain;（當然不止這一句）
不過這樣之后有個問題，就是我以前那些小圖也被擴大到最大了，這就尷尬了。
不過改成object-fit: scale-down 就沒這個問題了。
//示意寫法
img {
object-fit: scale-down;
height: 100%;
width: 100%;
}
不過這樣還是有個缺點就是本來圖片后面跟著文字的，直接擠到下一行去了，不過簡書也是這樣的我也不管了（逃）
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: 默認值。替換內容拉伸填滿整個content box, 不保證保持原有的比例。
- contain: 保持原有尺寸比例。保證替換內容尺寸一定可以在容器里面放得下。因此，此參數可能會在容器內留下空白。
- cover: 保持原有尺寸比例。保證替換內容尺寸一定大于容器尺寸，寬度和高度至少有一個和容器一致。因此，此參數可能會讓替換內容（如圖片）部分區域不可見。相當于是你有一個100100的容器，但放了個100200的圖片，那么它會顯示成200*200。
- none: 保持原有尺寸比例。同時保持替換內容原始尺寸大小。
- scale-down: 可以參考我上面說的第二個例子，就好像依次設置了none或contain, 最終呈現的是尺寸比較小的那個。
注意 img上都是{ width: 100%; height: 100%; }
為什么我設置了width和height但除了fill之外都無視了
img是個元素，且是個替換元素，這個通過上面的學習應該都知道；
一個圖片，如果沒有src，它依然是個替換元素，它在瀏覽器中的解析依然是正確的；
src指向的圖片屬于替換內容，注意，這個替換內容和這個img替換元素是殼子與內容的關系，兩者是獨立的。在CSS2.1時代，殼子的實際尺寸（如果沒有CSS或HTML設置），則是跟隨內容的實際尺寸，因此，網頁加載的時候，我們會看到圖片占據的高度從0到圖片實際高度跳動的過程；如果殼子，也就是img有尺寸限制，則替換內容fill拉伸適應于 img替換元素的設定尺寸。總而言之，殼子與內容的尺寸永遠是一樣的。于是，我們就會誤認為圖片就是那個圖片，唯一的存在，導致我們理解object-fit的特性表現出現了障礙。在CSS3時代，object-fit的世界里，object-fit控制的永遠是替換內容的尺寸表現，注意，是替換內容的尺寸表現，不是img替換元素。或者這么講吧，我們對img設置：
.box > img { width: 100%; height: 100%; }
實際上是控制img這個元素的，這個殼子的尺寸是100%撐滿容器。上面截圖的5個示例的圖片實際上都是100%拉伸與容器的；之所以實際的圖片內容沒有拉伸，是因為受object-fit控制，object-fit控制了src對應的替換內容的尺寸，或者包含，或者覆蓋。
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視覺化模型的總結吧
