object-fit：掌控替换元素尺寸属性

object-fit是CSS3中引入的属性，用来指定替换元素（如<img>或<video>）的内容如何适应到设置的宽高之中，特别适用于需要对图像进行布局控制的场景。替换元素指的是内容不受CSS视觉格式化模型控制，isObject自身拥有内在尺寸的元素。

在传统的图像布局中，开发者面临的常见问题是图像的缩放和宽高比控制。例如，一个宽高比为4:3的图像，如果要放入一个宽高比为16:9的容器中，不可避免的要么是图像被拉伸变形，要么是部分图像内容被裁剪，彼时开发者需要写额外的代码来处理这些问题。

object-fit属性提供了五个值，可以优雅地解决上述问题：

fill：默认值。图像被拉伸填充整个内容框，不保证保持原有的比例。

contain：图像保持原比例同时被缩放，直到全部可见在容器中。

cover：图像保持原比例并且完全覆盖容器内容区，图像可能会被裁切。

none：图像不会被拉伸或缩放，保持原始大小显示，可能会溢出容器。

scale-down：取none或contain中较小的一个效果，图像总是完整显示。

举例：

来为object-fit属性准备一个具体的例子。假设有一个图片展示组件，要在不同大小的容器中显示不同大小和比例的图片：

<div class="container">

  <img src="beautiful-landscape.jpg" alt="风景图" class="image-fit"/>

</div>

.container {  width: 300px;  height: 200px;  overflow: hidden;  border: 1px solid #ccc; /* for visibility */}

.image-fit {  width: 100%;  height: 100%;  object-fit: cover; /* Magic happens here */}

在上述的样式中，container设置了一个固定的宽度和高度，image-fit的object-fit属性设为cover。图像会保持其原始比例，并且尽可能覆盖整个容器区域，如果图像的比例与容器不匹配，那么它的某些部分将被裁剪，以保证图像覆盖整个容器，而不会出现变形。

如果希望无论容器大小如何，都要显示图像的全部内容，而不裁剪任何部分，同时保证图像的原始比例，可以将object-fit的值改为contain。

.image-fit {  /* Other styles remain unchanged */  object-fit: contain;}

这样设置后，图像将缩放以完全适应容器，可能会在上下或左右留下空白。