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` 值来控制图片的显示效果。

相关问题

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;
}

.img-list img { /* float: left; */ width: 80%; height: 300px; margin-right: 1%; /* margin-bottom: 10px; */ /* object-fit: contain; -o-object-fit: contain; */ } .img-list .img { /* float: left; */ width: 80%; height: 300px; margin-right: 1%; /* margin-bottom: 10px; */ display: inline-block; /* background-position: center; background-repeat: no-repeat; background-size: contain; */ /* object-fit: contain; -o-object-fit: contain; */ }这段css代码输出的图片太小怎么回事

根据代码中的注释，可以看出这段 CSS 代码中使用了两个类 `.img-list img` 和 `.img-list .img` 来设置图片的样式。由于这两个类的设置几乎相同，除了 `.img` 类中使用了 `display: inline-block;` 属性来让图片水平排列，并去掉了 `background-position`、`background-repeat` 和 `background-size` 属性，因此，这两个类的设置可能会互相冲突，导致图片大小不符合预期。

建议检查 HTML 代码中，是否有同时使用了这两个类的元素，并分别给它们添加不同的类名，或者将它们的样式合并到一个类中，避免样式冲突。另外，可以尝试增加图片的宽度和高度，或者使用 `object-fit` 属性来调整图片大小。