css - 是否可以在保持纵横比不变的情况下将 DIV 限制为最大宽度？

Question

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

但是，我只希望 DIV 变大然后停止。但是，如果我将 max-width: 300px; 应用到包含的 div，当视口(viewport)足够大时，div 将停止扩展其宽度，但高度会继续增加，失去宽高比。如果我应用 max-height: 60px;，它没有任何效果。

如何让 div 随着视口(viewport)的宽度扩展，保持其纵横比，并在指定的最大宽度处停止扩展高度和宽度？

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