html - 如何使用背景大小 : contain on element with responsive height

Question

我在 div 上使用 background-size: contain，但意识到虽然图像是响应式的，但 div 元素的高度保持不变。什么是允许 div 的高度像图像一样响应的好解决方案，这样我就不会在 div 和它的下同级元素之间出现空白？

    .projectBlurbHero {
        background-image: url('http://artofabsence.com/wp-content/uploads/2012/09/camel-ride1.jpg');
        background-size: contain;
        background-position: top center;
        background-repeat: no-repeat;
        height: 460px;
        max-height: 460px;
    }

    <div>
       <div class="projectBlurbHero"></div>
       <div class="projectBlurbTitle">
          <h2>Title</h2>
       </div>
    </div>

Answer 1

假设您的目标是让 div 保持其纵横比(这样，如果宽度被迫减小，高度也会减小，以便图像按比例缩放而没有空白)，您可能必须进行计算以获得div的高度。为此，您可以使用 JavaScript 或 css 的 calc 功能(尽管后者未得到普遍支持；Opera Mini 不接受)。您还可以使用媒体查询来设置断点并防止空格过高，但这种最佳选择的情况很少见。

一个异常(exception):如果宽度直接缩放到浏览器窗口的宽度，您可以使用 vw 单位，尽管 Opera Mini 也不支持该单位。

如果它应该响应其他内容，则可能会或可能不会允许更简单的方法，具体取决于它响应的内容。