可替换元素（Replaced Object）
CSS中的可替换元素指的是其内容不受到CSS视觉格式化模型控制的元素，比如image元素、iframe嵌入式文档、applet等。典型的如空白的html可能没有固定的尺寸。
可替换元素的展现效果不是由CSS来控制的，这些元素是一种外部对象，它们外观的渲染是独立于CSS的。例如img元素的内容会被src属性指定的图像替换掉，而替换元素通常具有固定的尺寸。
简单来说，可替换元素的内容不受当前文档样式的影响，虽然CSS中可以使用object-position属性影响可替换元素的位置，但不会影响到可替换元素自身的内容。比如iframe元素可具有自己的样式表，但不会继承父级文档的样式。
典型的可替换元素包括object、video、texture、input，audio和canvas在某些特定情形下也是可替换元素。CSS渲染模型不会考虑可替换元素内容的渲染，这些替换元素的展示独立于CSS。
| 可替换元素 | 描述 |
|---|---|
| img | 图像，img的src属性中的内容可以被替换。 |
| video | 视频，video的src属性中的内容可以被替换。 |
| embed | - |
| iframe | - |
| option | - |
| audio | 音频 |
| canvas | 画布 |
| object | - |
| applet | - |
| input |
type=image类型的input元素和img一样可以被替换 |
CSS能对可替换原生产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。
控制可替换元素内容框中对象位置的CSS属性
| 属性 | 描述 |
|---|---|
| object-fit | 指定可替换元素的内容对象在元素盒区域中的填充方式 |
| object-position | 指定可替换元素的内容对象在元素盒区域中的位置 |
object-fit/object-position之间的关系类似于background-size/background-position，不管是关系还是属性值，都有相似之处。
填充方式（object-fit）
object-fit属性专门用于【可替换元素】的内容应该如何适应其使用的高度和宽度确定的框，这里的object实际上指的是replaced element可替换元素。
object-fit: fill | contain | cover | none | scale-down;
| 属性值 | 名称 | 描述 |
|---|---|---|
fill |
填充 | 默认值，被替换内容【拉伸填满】内容框content-box，不保证保持原有比例。 |
contain |
包含 | 保持原有宽高比，被替换内容将被【缩放】以适应填充元素的内容框`content-box``，容器内可能留白。 |
cover |
覆盖 | 保持原有宽高比，被替换内容在宽度或高度上至少一个与容器保持一致，以保证替换内容尺寸一定大于容器尺寸。可能会让替换内容部分区域不可见。 |
none |
无 | 保持原有宽高比，被替换内容将保持内容原始尺寸大小。 |
scale-down |
降低 | 内容尺寸与none或contain中一个相同，取决于它们之间谁得到的尺寸更小。 |
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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会拉伸可替换元素的内容以适应其content-box
例如：不保持宽高比来缩放图片，使图片完全适应。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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可替换标签的宽高则是width:100%; height:12rem;。采用object-fit:fill会同时缩放图片原本的width和height以适应img的宽高。
包含（contain）
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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 href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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 href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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>
最佳实践
响应式设计（RWD）中图片自适应处理的一般方式是给图片容器设置一个尺寸，然后让图片长度比例来覆盖整个容器，以达到居中自动裁剪图片的功能。
img{max-width:100%; height:auto; object-fit:cover; }
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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 href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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规定了可替换元素的内容在其content-box内容框中的位置，可替换元素的内容框中未被对象所覆盖的部分则会显示为该元素的背景。
object-position: <position>;
object-position默认值为50% 50%即居中显示，无论object-fit填充值是什么，其内容显示都是水平垂直居中的。
当使用object-fit属性裁切时，可使用object-position控制裁切的位置，另外object-position与background-position用法类似。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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>
