Question

我使用background-size：在div上包含，但是虽然图像是响应的，但是div元素高度保持固定。什么是一个很好的解决方案，让div的高度像图像一样响应，所以我不会在div和它的兄弟元素之间得到空白？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

假设你的目标是让div保持其宽高比（这样如果宽度被迫减小，高度也会降低，以便图像按比例缩放而没有空格），你可能需要做计算以获得div的高度。为此，您可以使用JavaScript或css的calc功能（虽然后者不是普遍支持的; Opera Mini不接受它）。您还可以使用媒体查询来设置断点并防止空格过高，尽管这种情况很少是最佳选择。

一个例外：如果宽度直接缩放到浏览器窗口的宽度，则可以使用vw单元，但Opera Mini也不支持该宽度。

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

如何使用background-size：包含具有响应高度的元素

1 个答案: