Question

使用填充技巧以响应方式获得元素比例并保持设置的宽高比。但是，当高度来自填充时，如何设置最大高度？

参见示例，我希望这可以扩展但是一旦它达到设定的高度，那么高度不会缩放（但保留全宽）。

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

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

Answer 1

如果您的容器需要与整个页面一样，您可以使用height: 23vw代替padding: 23%。通过这样做，您还可以设置最大高度：

＆＃13;

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

＆＃13;

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

＆＃13;

当然，如果元素较宽，但您知道公式，则可以调整宽度。例如，如果您希望它是页面宽度的50％，则可以设置高度：calc(23vw * 0.5)或11.5vw。

PS：如果要将内部元素放在外部，请确保将position: relative添加到外部元素。这将使内部元素的顶部，左侧，右侧和底部相对于外部元素的边界。

Answer 2

使用填充技巧无法独立于宽度限制高度。但是，你可以伪造它。

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

然后，为了让背景继续，请包装容器并将背景颜色应用到包装器。

（Demo）

＆＃13;

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

＆＃13;

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

＆＃13;

灵活的DIV保持纵横比，但如何拥有最大高度？

2 个答案: