CSS纵横比与最大高度

Question

我有一个部分，我想使用纵横比进行缩放，但也保持最大和最小高度。不知何故，max-height属性不适用于此，同时min-width工作正常。

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

好的，如果我理解正确的话，你需要将宽度链接到宽度的百分比（我要通过将高度设置为视口宽度单位而不是视口高度 - 在我的例如我把它设置为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;
}