CSS实现将图片等比例缩放并根据情况隐藏溢出

要实现将图片等比例缩放并根据情况隐藏溢出，可以使用CSS的object-fit 属性实现。

下面是一个示例代码，用于实现将图片等比例缩放并根据情况隐藏溢出的部分：

1
2
3

1
2
3
4
5
6
7
8
9
10
11

.container {
width: 120px;
height: 70px;
overflow: hidden;
}

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

在上面的代码中，.container 类设置了固定的宽度和高度，并使用 overflow: hidden; 将溢出部分隐藏起来。.container img 类设置了图片的宽度和高度都为 100%，并使用 object-fit: cover; 将图片等比例缩放并填充整个容器，溢出的部分会被隐藏。

请将 your-image.jpg 替换为你要显示的图片的路径，并将上述代码添加到你的 HTML 和 CSS 文件中。这样，图片就会按照你的要求进行等比例缩放，并根据情况隐藏溢出的部分。

分享到：