使背景图像响应

Question

我有以下CSS类。

.img {
  background-size: cover;
  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
  color: #fff;
  height: 200px;
  position: relative;
  text-align: center;
  width: 100%;
}

我想要做的是按比例制作高度400px。 （使其对移动设备/平板电脑和桌面产生响应）

目前，如果我将高度设为400px;图像延伸到右侧。 （在移动设备屏幕中）

这就是我在代码中使用它的方式，作为背景图像

<div class="hero" style="background-image: url('<image path>');">
</div>

那么如何才能使这个背景图像响应

Answer 1

要创建比率框，您可以使用padding-top根据宽度的百分比定义div的高度：

.img {
  background-size: cover;
  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
  color: #fff;
  height: 75%;
  position: relative;
  text-align: center;
  width: 100%;
}

这会为图像创建一个4：3的比例（来自评论的是您的图像应该是什么）。 您需要确定的是图像的比例，因此您可以设置正确的填充量。

了解使用padding-top作为百分比的重要事项：它指的是包含块的宽度。在您的情况下，它不会成为问题，因为您'反正使用100％宽度，但要记住这一点。

这是一个简单的例子：

.wrap{
  width:50%;
  margin:0 auto;
}

.ratio-box{
    width:100%;
    padding-top:100%;
    background:blue;
  }

<div class="wrap">
  <div class="ratio-box"></div>
  <p>1:1 ratio box (resize browser for results)</p>
</div>