object-fit的属性值

object-fit 是一个 CSS 属性，用于指定如何调整元素的内容，以适应其容器的大小，特别适用于图像、视频或其他媒体元素。
它有以下几个常见的值：

1.fill（默认值）

让元素的内容完全填充容器的大小。如果内容的比例与容器的比例不同，它会被拉伸或压缩以适应容器。
示例：object-fit: fill;

2.contain

保持内容的原始比例，缩放内容以适应容器的大小。内容将完全显示，且不会被裁剪，但容器可能不会完全填满。
示例：object-fit: contain;

3.cover

保持内容的原始比例，缩放内容以填充容器，可能会裁剪部分内容，确保没有空白区域。容器会完全被填充。
示例：object-fit: cover;

4.none

内容的尺寸不受容器的影响。元素将保持其原始大小，可能会溢出容器。
示例：object-fit: none;

5.scale-down

选择 none 或 contain 之间的较小者，即在内容不超过容器时不缩放，在内容过大时使用 contain 来适应容器。
示例：object-fit: scale-down;

示例用法：

<img src="image.jpg" style="width: 100%; height: 200px; object-fit: cover;">

在这个例子中，图像的宽度会被拉伸到容器的宽度，而高度固定为 200px，图像会按比例缩放并裁剪以填满整个容器区域。

总结：

fill：拉伸填充，可能改变比例。
contain：保持比例，内容完全显示，可能有空白。
cover：保持比例，完全填充，可能裁剪内容。
none：保持原尺寸，可能溢出容器。
scale-down：自动选择最小的适应方式。

根据不同的布局需求，选择合适的 object-fit 属性值来优化图像或媒体内容的展示效果。