Question

我在灵活的div中有一个图像，我希望图像保持相同的大小，无论div是否被调整大小，图像应该被隐藏（居中它也是一个很好的附加组件）。怎么做到这一点？

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

Flex是将图像居中的好方法

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

在.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>

Answer 3

您可以通过制作image as background并将背景位置对齐到中心来实现此目的：

＆＃13;

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

＆＃13;

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

＆＃13;

如何在灵活的div中保持图像大小相同（并裁剪多余的）？

3 个答案: