保持最大高度的纵横比

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

但是这也会破坏纵横比。 有什么想法？

- user2909019

Answer 1

对于移动电话和其他较小的屏幕尺寸，我应用以下CSS：（例如，我自动为所有图像设置这个）。

在这种情况下，它将最大限度地适应其父元素的宽度，并且高度将保持相同的比例，使用height: auto;

max-width: 100%;
height: auto;

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

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

- Mark Pieszak - Trilon.io

---

较小的屏幕尺寸似乎可以正常工作。当屏幕宽度远大于屏幕高度时，问题就会出现。例如：http://i.imgur.com/Zb9iv9E.png - user2909019

请参见以下链接：https://stackoverflow.com/questions/52375965/how-to-have-a-div-with-fixed-aspect-ratio-and-max-height-pure-css-no-vh-or-vw - Beuun