javascript - 如何使背景图片的 具有动态高度

Question

我需要用背景图片模仿 div 的以下行为。

该页面有 3 个 div 相互叠加。它们的最大宽度为 600 像素。在较小的屏幕上打开时，宽度会根据屏幕进行调整，高度也应进行调整，始终保持图像的纵横比为 10/7

我尝试使用 background-size 样式属性，但这并没有改变 div 的高度，所以图片最终被裁剪了。我负担不起剪辑图像。

请指教

一个

两个

三

Answer 1

好吧，实际上这取决于您的真实标记，但这可能是一个起点:

关键点是 top/bottom padding 上的百分比值是相对于框的包含 block 的宽度。

此外，使用 background-size: contain使用宽高比调整背景图像的大小。值得注意的是，IE9+ 支持此功能。

关于响应式容器的进一步阅读，你可以引用我的回答here .

Example Here .

.box {
  background: url(http://placehold.it/300) 50% 50% / contain no-repeat;
  
  width: 80%; /* or whatever else */
  overflow: hidden;
  position: relative;
}

.box > span {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  padding: 5% 0;
}

.box > span:before,
.box > span:after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  padding: 2% 0;
}

.box > span:before {
  top: 0;
  background-color: rgb(255, 90, 79);
}

.box > span:after {
  bottom: 0;
  background-color: rgb(159, 31, 56);
}

.box:before {
  content: "";
  display: block;
  padding-bottom: 70%;
}

<div class="box">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolores doloremque id quia esse! Doloribus voluptate nihil quam natus, similique, vero amet nesciunt excepturi. Optio dicta quas, dolores facere voluptatem.
  </span>
</div>