如何在img标签添加object-fit

属性？

可以在img标签中添加object-fit属性来设置图片的适应方式，object-fit属性有以下几个可选值：
- fill：默认值，图片将完全填充指定容器，可能导致图片变形。
- contain：图片将按比例缩小或放大，完全适应指定容器，不会变形，空白处留白。
- cover：图片将按比例放大，完全覆盖指定容器，超出部分被裁剪。
- none：图片原始大小，与对象框体一样大小。
- scale-down：将按比例缩小以适合容器，只有当它比 contain更好时。

例如：

<img src="example.jpg" alt="Example" style="object-fit: cover;">

相关问题

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

.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` 属性来调整图片大小。