保持纵横比与最大高度

Question

我希望div保持它的纵横比，同时还要有最大高度。在大多数情况下，我能够保持宽高比，除非我点击媒体查询：

@media only screen and (min-width: 59.063em) {
    #wrapper {
        max-width: 59.063em;
    }
}

当我达到最大宽度并使屏幕尺寸变小时（我在开发人员工具中时注意到这一点），高度继续增长并溢出父节点。例如：http://i.imgur.com/Zb9iv9E.png

可在此处找到：http://codepen.io/TrevorRice/pen/jEooQG

我尝试使用

#wrapper {
    ...
    max-height: 90%;
    ...
} 

但这也打破了宽高比。

有什么想法吗？

Answer 1

对于手机和其他较小的屏幕尺寸，我应用此CSS :(例如，我自动为所有图像设置了这一点。）

在这种情况下，它将达到其父级宽度的最大值，并且高度将与height: auto;

保持在相同的比率内

max-width: 100%;
height: auto;

在您的情况下，您可能只需要max-height和amp;的组合。高度。这可能会为您解决问题！

#wrapper { 
    max-height:90%; /* <-- */
    max-width:100%;
    height:auto;
}