html/css object-fit

### HTML/CSS `object-fit` 属性使用教程

#### 定义与作用
`object-fit` 是 CSS 中的一个属性，用于规定图像或视频应如何适应其容器框的大小。此属性适用于 `<img>`、`<video>` 和其他可替换元素[^1]。

#### 取值及其效果

- **none**: 图像不会缩放，保持原始尺寸显示，在必要时会超出容器边界。

- **fill**: 默认行为，拉伸填充整个容器区域，可能会改变宽高比例造成变形。

- **contain**: 维持宽高比的情况下缩放图片直到完全可见于容器内部；如果容器较大，则会在周围留白。

- **cover**: 同样维持宽高比，但是尽可能大得覆盖住整个容器，多余部分会被裁剪掉看不见。

- **scale-down**: 对比 `none` 和 `contain` 的结果选取较小的那个作为最终呈现方式[^2]。

#### 实际应用案例

下面通过具体的例子来展示不同取值的效果：

<div style="width: 300px; height: 200px;">
    <!-- 不同 object-fit 效果 -->
    
    <h4>Object Fit None</h4>
    <img src="https://via.placeholder.com/500x300" alt="" style="object-fit:none;width:100%;height:100%;">
    
    <h4>Object Fit Fill</h4>
    <img src="https://via.placeholder.com/500x300" alt="" style="object-fit:fill;width:100%;height:100%;">
    
    <h4>Object Fit Contain</h4>
    <img src="https://via.placeholder.com/500x300" alt="" style="object-fit:contain;width:100%;height:100%;">
    
    <h4>Object Fit Cover</h4>
    <img src="https://via.placeholder.com/500x300" alt="" style="object-fit:cover;width:100%;height:100%;">
    
    <h4>Object Fit Scale Down</h4>
    <img src="https://via.placeholder.com/500x300" alt="" style="object-fit:scale-down;width:100%;height:100%;">
</div>

上述代码片段展示了五种不同的 `object-fit` 值对同一张图片的影响。每一种设置都对应着特定场景下的需求，开发者可以根据实际项目情况灵活选用合适的选项[^5]。