灵活的DIV保持宽高比，但如何实现最大高度？

Question

使用填充技巧可以使元素以响应方式缩放并保持设置的纵横比。但是当高度来自填充时，如何设置最大高度？

请参见以下示例：我希望此元素进行缩放，但一旦达到设置的高度，高度将不再缩放（但保留完整宽度）。

#container {
    background-color: #666;
    color: #ccc;
    padding-top: 23%;
    height: 0;
    overflow: hidden;
}

http://jsfiddle.net/louiswalch/9h4c8tor/

- Louis W

---

设置一个最大宽度，因为宽度是高度的参考。http://jsfiddle.net/9h4c8tor/13/ 使用伪元素，如果内容很大，将允许其增长，并保持在流中... - G-Cyrillus

Answer 1

如果您的容器需要占满整个页面宽度，就像在您的代码片中一样，您可以使用height: 23vw代替padding: 23%。这样做还可以设置最大高度：

#container {
    background-color: #666;
    color: #ccc;
    height: 23vw;
    max-height: 200px;
    overflow: hidden;
}
#container .inner {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    z-index: 1;
    font-size: 11px;
}

<div id="container">
    <div class="inner">This div should scale with the browser, and maintain the same aspect ratio.</div>
</div>

当然，如果元素比较窄，但您知道公式，您可以调整宽度。例如，如果要使其占页面宽度的50％，则可以将高度设置为：calc（23vw * 0.5）或11.5vw。

附：如果您想将内部元素定位在外部元素中，请确保向外部元素添加position: relative。这将使内部元素的顶部、左侧、右侧和底部相对于外部元素的边界。

- GolezTrol

---

嗯，不错的选项，但需要更受支持的方案。 - Louis W

更多支持？这在主流浏览器中都得到了支持，包括IE9及以上版本：http://caniuse.com/#feat=viewport-units。虽然IE8不支持，但也许在IE9上使用这个功能是可以接受的，而让IE8及以下版本的用户看到略微不太响应的横幅广告。 - GolezTrol

Answer 2

使用填充技巧无法独立限制高度而不影响宽度。但是，您可以模拟它。

您可以计算出在要将元素限制到的高度处宽度将是多少，然后将元素包装在容器中，并将该容器的最大宽度设置为指定的宽度并居中。

然后，为了让背景继续延伸，将容器包装起来，并将背景颜色应用于包装器。

(演示)

body {
    margin: 0;
}
.wrp-bg {
    background-color: #666;
}
.wrp {
    max-width: 800px;
    margin: 0 auto;
}
#container {
    padding-top: 23%;
    position: relative;
}
#container .inner {
    color: #ccc;
    position: absolute;
    top: 0;
    width: 100%;
    bottom: 0;
    padding: 20px;
    font-size: 11px;
    box-sizing: border-box;
}

<div class="wrp-bg">
    <div class="wrp">
        <div id="container">
            <div class="inner">This div should scale with the browser, and maintain the same aspect ratio.</div>
        </div>
    </div>
</div>

- user4639281