css 图片自动裁剪图片 |div分页css样式

img {
width: 100%;
height: auto;
object-fit: cover;
}

上面的 CSS 代码将自动将图像缩放到其容器的大小，并使用“cover”选项自动裁剪。这意味着图像将自适应到其容器，并且没有空白的间隔。

使用 CSS 裁剪图像的另一种方法是使用“object-position”属性。这个属性让你指定图像是在其容器的上部、下部、左边、右边还是中心位置。下面的示例将图像放置在容器的上部，同时自动裁剪它：

img {
width: 100%;
height: auto;
object-fit: cover;
object-position: top;
}

需要注意的是，这个方法不是所有浏览器都支持，对于一些老旧的浏览器可能会出问题。为了确保最大的兼容性，最好使用第一个示例，使用“cover”选项进行自动裁剪。