如何在调整大小时停止收缩背景图像

Question

所以我有一个div，背景图片的背景大小设置为覆盖。这是div代码：

.imgContainer {
  width: 400px;
  height: 340px;
  z-index: 1;
  border: 0;
  background: url('https://dummyimage.com/800x680/ccc/333');
  background-position: 50% 25%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-radius: .25rem;
}

@media screen and (max-width:650px) {
  .imgContainer {
    width: 100% !important;
  }
}

<div class="imgContainer"></div>

背景完全显示图像，但由于我使我的网站响应，我使用@media规则更改宽度650px的div。

@media screen and (max-width:650px){
  .imgContainer {
    width: 100% !important;
  }
}

当div被放大时，背景图像变宽并且不显示图像的大量内容。当宽度为400px且高度为340px时，图像的内容将完整显示。当div的宽度为100％且图像的内容与400px宽时显示的内容不同时，会出现此问题。如何解决这个问题？ 并提前感谢！

Answer 1

使用background-size: cover，您告诉浏览器确保图像覆盖整个元素，同时保持图像的原始宽高比。因此可以预期，改变HTML元素的宽高比会切断一些图像以实现这一点。

为了使图像响应，您必须确保图像的纵横比保持不变。

一种方法是使用以下内容：

@media screen and (max-width:650px) {
    .imgContainer {
        width: 100%;
        padding-bottom: 85%;
        height: auto;
    }
}

这将填充为元素宽度的85％，为100 /（400/340）= 85.假设您的div中没有其他内容，这将为您的图像提供适当的宽高比。

Answer 2

这可能有所帮助。注意：它只有在图像的宽高比为400：340（例如800 x 680,600 x 510等）时才有效。注意：最后一个媒体查询中的418像素是基于当前填充的经验值和余量。您可能需要不同的值。

Here is the codepen to see in in action

.imgContainer {
  width: 400px;
  height: 340px;
  z-index: 1;
  border: 0;
  background: url("https://dummyimage.com/800x680/ccc/333");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  border-radius: 0.25rem;
}

@media screen and (max-width: 650px) {
  .imgContainer {
    width: 100% !important;
    background-size: contain;
  }
}

@media screen and (max-width: 418px) {
  .imgContainer {
    background-size: cover;
  }
}

<div class="imgContainer"></div>