可替換元素（Replaced Object）
CSS中的可替換元素指的是其內(nèi)容不受到CSS視覺格式化模型控制的元素，比如image元素、iframe嵌入式文檔、applet等。典型的如空白的html可能沒有固定的尺寸。
可替換元素的展現(xiàn)效果不是由CSS來控制的，這些元素是一種外部對象，它們外觀的渲染是獨立于CSS的。例如img元素的內(nèi)容會被src屬性指定的圖像替換掉，而替換元素通常具有固定的尺寸。
簡單來說，可替換元素的內(nèi)容不受當(dāng)前文檔樣式的影響，雖然CSS中可以使用object-position屬性影響可替換元素的位置，但不會影響到可替換元素自身的內(nèi)容。比如iframe元素可具有自己的樣式表，但不會繼承父級文檔的樣式。
典型的可替換元素包括object、video、texture、input，audio和canvas在某些特定情形下也是可替換元素。CSS渲染模型不會考慮可替換元素內(nèi)容的渲染，這些替換元素的展示獨立于CSS。
| 可替換元素 | 描述 |
|---|---|
| img | 圖像，img的src屬性中的內(nèi)容可以被替換。 |
| video | 視頻，video的src屬性中的內(nèi)容可以被替換。 |
| embed | - |
| iframe | - |
| option | - |
| audio | 音頻 |
| canvas | 畫布 |
| object | - |
| applet | - |
| input |
type=image類型的input元素和img一樣可以被替換 |
CSS能對可替換原生產(chǎn)生的唯一影響在于，部分屬性支持控制元素內(nèi)容在其框中的位置或定位方式。
控制可替換元素內(nèi)容框中對象位置的CSS屬性
| 屬性 | 描述 |
|---|---|
| object-fit | 指定可替換元素的內(nèi)容對象在元素盒區(qū)域中的填充方式 |
| object-position | 指定可替換元素的內(nèi)容對象在元素盒區(qū)域中的位置 |
object-fit/object-position之間的關(guān)系類似于background-size/background-position，不管是關(guān)系還是屬性值，都有相似之處。
填充方式（object-fit）
object-fit屬性專門用于【可替換元素】的內(nèi)容應(yīng)該如何適應(yīng)其使用的高度和寬度確定的框，這里的object實際上指的是replaced element可替換元素。
object-fit: fill | contain | cover | none | scale-down;
| 屬性值 | 名稱 | 描述 |
|---|---|---|
fill |
填充 | 默認(rèn)值，被替換內(nèi)容【拉伸填滿】內(nèi)容框content-box，不保證保持原有比例。 |
contain |
包含 | 保持原有寬高比，被替換內(nèi)容將被【縮放】以適應(yīng)填充元素的內(nèi)容框`content-box``，容器內(nèi)可能留白。 |
cover |
覆蓋 | 保持原有寬高比，被替換內(nèi)容在寬度或高度上至少一個與容器保持一致，以保證替換內(nèi)容尺寸一定大于容器尺寸。可能會讓替換內(nèi)容部分區(qū)域不可見。 |
none |
無 | 保持原有寬高比，被替換內(nèi)容將保持內(nèi)容原始尺寸大小。 |
scale-down |
降低 | 內(nèi)容尺寸與none或contain中一個相同，取決于它們之間誰得到的尺寸更小。 |
<link rel="stylesheet">
<div class="container mx-auto my-4 p-4 bg-gray-200 grid grid-cols-5 gap-4">
<img src="http://source.unsplash.com/500x300" class="object-fill h-48 bg-black"/>
<img src="http://source.unsplash.com/500x300" class="object-contain h-48 bg-black"/>
<img src="http://source.unsplash.com/500x300" class="object-cover h-48 bg-black"/>
<img src="http://source.unsplash.com/500x300" class="object-none h-48 bg-black"/>
<img src="http://source.unsplash.com/500x300" class="object-scale-down h-48 bg-black"/>
</div>
填充（fill)
object-fit:fill會拉伸可替換元素的內(nèi)容以適應(yīng)其content-box
例如：不保持寬高比來縮放圖片，使圖片完全適應(yīng)。
<link rel="stylesheet">
<div class="container mx-auto my-4 p-4 bg-gray-200 overflow-hidden">
<img src="http://source.unsplash.com/1000x1000" class="object-fill w-full h-48"/>
</div>
圖片自身的尺寸是1000x1000的，img可替換標(biāo)簽的寬高則是width:100%; height:12rem;。采用object-fit:fill會同時縮放圖片原本的width和height以適應(yīng)img的寬高。
包含（contain）
<link rel="stylesheet">
<div class="container mx-auto my-4 p-4 bg-gray-200 overflow-hidden">
<img src="http://source.unsplash.com/1000x1000" class="object-contain w-full h-48"/>
</div>
覆蓋（cover）
<link rel="stylesheet">
<div class="container mx-auto my-4 p-4 bg-gray-200 overflow-hidden">
<img src="http://source.unsplash.com/1000x1000" class="object-cover w-full h-48"/>
</div>
降低（scale down）
<link rel="stylesheet">
<div class="container mx-auto my-4 p-4 bg-gray-200 overflow-hidden">
<img src="http://source.unsplash.com/1000x1000" class="object-scale-down w-full h-48"/>
</div>
最佳實踐
響應(yīng)式設(shè)計（RWD）中圖片自適應(yīng)處理的一般方式是給圖片容器設(shè)置一個尺寸，然后讓圖片長度比例來覆蓋整個容器，以達(dá)到居中自動裁剪圖片的功能。
img{max-width:100%; height:auto; object-fit:cover; }
<link rel="stylesheet">
<div class="container mx-auto my-4 p-4 bg-gray-200 overflow-hidden">
<img src="http://source.unsplash.com/400x400" class="object-cover max-w-full h-auto"/>
</div>
例如：圖文混排時隨著窗口縮放，圖片跟隨縮放。
<link rel="stylesheet">
<div class="container mx-auto my-4 p-4 bg-gray-200 flex">
<img src="http://source.unsplash.com/400x300" class="object-scale-down object-center bg-black h-full w-auto"/>
<p class="h-full ml-4 bg-white">圖文混排時圖片的縮放圖文混排時圖片的縮放圖文混排時圖片的縮放圖文混排時圖片的縮放圖文混排時圖片的縮放圖文混排時圖片的縮放圖文混排時圖片的縮放圖文混排時圖片的縮放</p>
</div>
對象定位（object-position）
object-position規(guī)定了可替換元素的內(nèi)容在其content-box內(nèi)容框中的位置，可替換元素的內(nèi)容框中未被對象所覆蓋的部分則會顯示為該元素的背景。
object-position: <position>;
object-position默認(rèn)值為50% 50%即居中顯示，無論object-fit填充值是什么，其內(nèi)容顯示都是水平垂直居中的。
當(dāng)使用object-fit屬性裁切時，可使用object-position控制裁切的位置，另外object-position與background-position用法類似。
<link rel="stylesheet">
<div class="container mx-auto my-4 p-4 bg-gray-200 grid grid-cols-3 gap-4">
<img src="http://source.unsplash.com/100x100" class="object-none object-left-top bg-gray-400 h-48"/>
<img src="http://source.unsplash.com/100x100" class="object-none object-top bg-gray-400 h-48"/>
<img src="http://source.unsplash.com/100x100" class="object-none object-right-top bg-gray-400 h-48"/>
<img src="http://source.unsplash.com/100x100" class="object-none object-left bg-gray-400 h-48"/>
<img src="http://source.unsplash.com/100x100" class="object-none object-center bg-gray-400 h-48"/>
<img src="http://source.unsplash.com/100x100" class="object-none object-right bg-gray-400 h-48"/>
<img src="http://source.unsplash.com/100x100" class="object-none object-left-bottom bg-gray-400 h-48"/>
<img src="http://source.unsplash.com/100x100" class="object-none object-bottom bg-gray-400 h-48"/>
<img src="http://source.unsplash.com/100x100" class="object-none object-right-bottom bg-gray-400 h-48"/>
</div>
