css的object-fit

### CSS `object-fit` 属性详解

#### 定义与作用
`object-fit` 是 CSS3 中的一个属性，用于规定图片或视频等替换元素如何适应其容器框的大小[^1]。此属性对于创建响应式设计至关重要，因为它允许开发人员精确控制媒体内容在其容器内的显示方式。

#### 可用值及其效果

- **fill**
默认行为，会拉伸对象以填充整个容器区域，不保持宽高比例[^2]。

- **contain**
维持原图的比例，在容器内部尽可能大范围展示图像而不超出边界；可能会留下空白空间.

- **cover**
同样维持原始比率，但是通过裁剪来确保完全覆盖背景矩形，部分内容可能不可见.

- **none**
图像以其固有尺寸呈现，无视容器大小变化.

- **scale-down**
将比较 `none` 和 `contain` 的结果，选取较小的那个作为最终渲染模式.

#### 实际应用案例

下面是一些具体的例子说明不同设置下 `object-fit` 如何影响 `<img>` 标签的行为：

<div class="container">
    <img src="example.jpg" alt="" style="width: 100%; height: 200px;">
</div>

##### fill 效果演示
当采用 `fill` 方式时，无论源文件的实际宽度高度是多少，都会被强制调整至目标区域内并充满整个盒子模型，即使这意味着变形失真:

.container img {
    object-fit: fill;
}

##### contain 效果演示
而如果选择了 `contain` ，则会在保留原有纵横比的前提下最大化地填满可用空间，必要时会出现上下左右居中的留白区:

.container img {
    object-fit: contain;
}

##### cover 效果演示
使用 `cover` 则会使图片按比例放大直到至少有一个维度等于或超过容器尺寸，多余部分会被截断隐藏起来:

.container img {
    object-fit: cover;
}

##### none 效果演示
最后一种情况是 `none` ,此时图片不会发生任何改变，直接按照自身的实际像素数进行加载和显示:

.container img {
    object-fit: none;
}

##### scale-down 效果演示
对于 `scale-down`, 系统会选择 `none` 或者 `contain` (取决于哪一个更小)，从而实现更加灵活自然的表现形式:

.container img {
    object-fit: scale-down;
}