如何使<div>与背景图像保持动态高度

debugcn 发表于 Dev

帕维尔·基里洛夫（Pavel Kirillov）

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

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

我尝试使用background-size样式属性，但这并没有改变div的高度，因此图片最终被裁剪了。我无法裁剪图像。

请指教

一在此处输入图片说明

二在此处输入图片说明

三在此处输入图片说明

哈希笔

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

关键是顶部/底部padding的百分比值是相对于width该框包含的块的百分比值。

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

有关响应式容器的更多信息，您可以在这里参考我的回答。

这里的例子。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。