css3 重合部分隐藏,css3 重复样式提取,css3 cur指针不显示,CSS3常见布局形式有哪些,CSS3采用什么措施避免样式无法兼容多种浏览器的问题,CSS3菜单缩放
CSS3 object-fit是一种CSS属性，用于指定一个元素(通常是<img>或<video>)在其容器中的大小和位置，并控制调整图像以适应指定大小和位置的方式。

object-fit属性有五个值可用：

- fill: 默认值。图像会拉伸以填充容器。
- contain: 图像保持原始比例，并缩放到适合容器中而不失真。如果容器的宽高比与图像的宽高比不同，则图像可能仍然有空白区域。
- cover: 图像保持原始比例，并在填充容器时裁剪多余部分。如果容器的宽高比与图像的宽高比不同，则图像将被裁剪，以适合容器的较宽或较高的方向。
- none: 图像将按其原始尺寸呈现，忽略容器的大小。
- scale-down: 与contain类似，但仅在图像大于容器时才进行缩小，否则按原始尺寸呈现。

下面是一个示例，展示了如何使用object-fit属性：

html
<div class="container">
<img src="example.jpg" alt="Example image">
</div>

<style>
.container {
width: 300px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}

img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>


在这个示例中，我们创建了一个300x200像素的容器，并将其样式设置为具有黑色边框和隐藏溢出。然后，我们插入一个图像，并将其大小设置为100％宽度和高度，并使用object-fit：cover属性。这将导致图像填充整个容器，并在必要时裁剪多余部分，以便完全填充该容器。