具有最大高度的 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;
}