css object-fit

CSS object-fit是一个CSS属性，它允许您指定在元素的内容框中如何放置替换元素，例如图像或视频。object-fit有几个可选值，例如contain、cover、fill、scale-down和none。contain值将缩放图像，以便它完全适合元素的内容框，同时保持其纵横比。cover值将缩放图像，以便其完全覆盖元素的内容框，同时保持其纵横比。fill值将拉伸图像，以填充元素的内容框。scale-down值将缩小图像，以适应元素的内容框，如果它比contain还要小，则使用contain。none值将使图像保持其原始大小，而不会调整其大小或位置。

相关问题

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]。

css img object-fit

`object-fit` 是一个 CSS 属性，可以用于控制图片（或其他替换元素）在其容器中的显示方式。

`object-fit` 属性有以下几个可选值：

- `fill`：默认值，图片将被拉伸以填充整个容器，可能会导致图片的宽高比例发生变化。
- `contain`：图片将按比例缩放，保持完整显示在容器内，可能会留有空白区域。
- `cover`：图片将按比例缩放，保持完整覆盖容器，可能会超出容器。
- `none`：图片将按照原始尺寸显示，忽略容器的尺寸。
- `scale-down`：图片将按比例缩放，选择 `none` 或 `contain` 中较小的一个值。

使用示例：

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

上面的示例将图片调整为固定的宽度和高度，并使用 `object-fit: cover;` 让图片按比例缩放以覆盖整个容器。你可以根据需要选择适合的 `object-fit` 值来控制图片的显示效果。