是否可以在保留DIV宽高比的同时将其限制为最大宽度？

Question

我正在使用此答案中的技术来创建DIV，当调整浏览器视口的大小时，该DIV保持其宽高比。

但是，我希望DIV变大然后停止。 但是，如果我应用max-width: 300px; 到包含的div，当视口变得足够大时，div将停止扩展其宽度，但高度会保持不变，从而失去长宽比。 如果我应用max-height: 60px; ，它没有任何作用。

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

现场代码在这里。

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 。