具有最大高度的CSS纵横比

Question

我有一个部分，我想要使用纵横比进行缩放，但也将其保持在最大和最小高度。不知何故，最大高度属性不适用于此，同时最小宽度工作得很好。

div { 
 
    background: green; 
 
    border-bottom: 2px solid red; 
 
    padding-top: 60%; 
 
    max-height: 100vh; 
 
    min-height: 450px; 
 
    box-sizing: border-box; 
 
}

<div></div>

我想要实现，即显示有一个固定的宽高比的内容，它按比例缩小，直到达到最小高度，但也不会超过视高度时，显示在更宽的浏览器中。为了说明见附件图片：

任何想法？

Answer 1

设置height: 100vh就足够了 - 如果我正确理解你的问题。无论元素在DOM树中的位置如何，100vh等于浏览器窗口的高度。该规则可以与min-height结合使用。

div { 
    height: 100vh; 
    min-height: 300px; 
    padding-top: 60%; 
    background-color: green; 
    box-sizing: border-box; 
} 

Answer 2

好吧，如果我理解正确的话，你需要做的有挂宽度框的高度以百分比（我会通过设置高度视口宽度单位，而不是视做高度 - 在我的例子中，我已将其设置为75％）。这样，盒子就不会受到最大高度或最小高度的约束。

html, 
body { 
    width: 100%; 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
    background-color: #00ff00; 
} 

.box { 
    width: 100%; 
    height: 75vw; 
    max-height: 100vh; 
    min-height: 400px; 
    background-color: #ff0000; 
}