如何在灵活的div内保持图像相同的大小(并裁剪多余的部分)?

Question

我在一个灵活的div中有一个图像，我希望图像保持相同的大小，无论是否调整div的大小，图像都应该被隐藏(居中也是一个很好的附加组件(。如何实现这一点？

下面是我当前的代码，这会导致在调整div 大小时图像缩小。谢谢！

.banner-img {
max-width: 30%;
float: left;
overflow: hidden;
border: 1px solid red;
}
.banner-img img {
width: 250px;
height: 100px;
}

<div class="banner-img"><img src="http://via.placeholder.com/250x100" alt="" /></div>

Answer 1

Flex 是居中图像的好解决方案

.banner-img {
max-width: 30%;
height: auto;
overflow: hidden;
display: flex;
justify-content: center;
border: 1px solid red;
}
.banner-img img {
width: 250px;
height: auto;
}

<div class="banner-img"><img src="http://via.placeholder.com/250x100" alt="" /></div>

Answer 2

您可以通过将图像作为背景并将背景位置对齐到中心来实现这一点：

.banner-img {
width: 250px;
max-width: 30%;
height: 100px;
background: url("http://via.placeholder.com/250x100") center no-repeat;
}

<div class="banner-img"></div>

Answer 3

在.banner-img img中，您可以添加object-fit: cover并将width: 250px从像素更改为百分比，如下所示：

.banner-img {
max-width:30%;
float:left;
overflow:hidden;
}
.banner-img img {
width: 100%;
height: 100px;
object-fit: cover;
}

<div class="banner-img"><img src="http://via.placeholder.com/250x100" alt="" /></div>