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规则将div的宽度更改为650px。

@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>

如何阻止背景图片在调整尺寸时缩小

2 个答案: