Question

我正在使用the technique from this answer创建一个在调整浏览器视口大小时保持其宽高比的DIV。

然而，我希望DIV只能变得那么大然后停下来。但是，如果我将max-width: 300px;应用于包含div，则当视口变得足够大时，div将停止扩展其宽度，但高度继续保持不变，失去纵横比。如果我申请max-height: 60px;，则无效。

如何使用视口宽度扩展div，保持其宽高比，停止以指定的最大宽度展开高度和宽度？

Live code here.

body {
    width: 36%;
    margin: 8px auto;
}

div.stretchy-wrapper {
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;
    max-width: 300px;
    background: blue;
}

div.stretchy-wrapper > div {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;

    color: white;
    font-size: 24px;
    text-align: center;
}

Answer 1

看起来问题是因为填充增加了基于调整大小的高度％

下面是我添加了box-sizing的示例：border-box;并给出了调整大小时保持不变的高度

http://dabblet.com/gist/85df841bd1602d24829f

Answer 2

一种可能的解决方案似乎是简单地在包装器div周围创建一个包含div，并将max-width应用于此。

是否可以在保持其纵横比的同时将DIV约束到最大宽度？

2 个答案: