使背景图像响应

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>