object-fit/object-position及替换元素等（转载）

替换元素

其内容不受CSS视觉格式化模型（中文释义参见这里）控制的元素，比如image, 嵌入的文档(iframe之类)或者applet。比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。
CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object, video, textarea, input也是替换元素，audio和canvas在某些特定情形下为替换元素。
使用CSS的content属性插入的对象是匿名替换元素。

object-position和object-fit只针对替换元素有作用，也就是form表单家族控件系列，老牌劲旅img图片，HTML5新贵video视频等元素（据我测试，SVG元素貌似不支持，但可以作为src替换内容出现）。
由此引出的概念：
1、img是个元素，且是个替换元素，这个通过上面的学习应该都知道；
2、一个图片，如果没有src，它依然是个替换元素，它在浏览器中的解析依然是正确的；

<img>

3、src指向的图片属于替换内容，注意，这个替换内容和这个img替换元素是壳子与内容的关系，两者是独立的。在CSS2.1时代，壳子的实际尺寸（如果没有CSS或HTML设置），则是跟随内容的实际尺寸，因此，网页加载的时候，我们会看到图片占据的高度从0到图片实际高度跳动的过程；如果壳子，也就是img有尺寸限制，则替换内容fill拉伸适应于 img替换元素的设定尺寸。总而言之，壳子与内容的尺寸永远是一样的。于是，我们就会误认为图片就是那个图片，唯一的存在，导致我们理解object-fit的特性表现出现了障碍。
4、在CSS3时代，object-fit的世界里，object-fit控制的永远是替换内容的尺寸表现，注意，是替换内容的尺寸表现，不是img替换元素。或者这么讲吧，我们对img设置：

.box > img { width: 100%; height: 100%; }

实际上是控制img这个元素的，这个壳子的尺寸是100%撑满容器。上面截图的5个示例的图片实际上都是100%拉伸与容器的；之所以实际的图片内容没有拉伸，是因为受object-fit控制，object-fit控制了src对应的替换内容的尺寸，或者包含，或者覆盖。

5、之所以object-fit:contain会透明留白，是因为我们没有对壳子img设置背景色，假设我们给壳子img增加个红色背景，大家就会明白我说的意思了：

.box > img { width: 100%; height: 100%; background-color: #cd0000; }

效果如下截图，会发现，原来的透明留白现在是红色背景，说明了什么？说明img替换元素和src替换内容是两个独立体。img替换元素受到了CSS 100%拉伸控制（所以红色背景充满容器），src替换内容也受到了object-fit展示控制。大家各司其职，没有什么覆盖，冲突！

原文链接：半深入理解CSS3 object-position/object-fit属性