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>

我想要实现的是显示具有固定宽高比的内容，它会缩小直到达到最小高度，但在更宽的浏览器中显示时也不会超过视口(viewport)高度。说明见附图:

有什么想法吗？

Answer 1

好吧，如果我理解正确，您需要将框的高度以百分比链接到宽度(我将通过将高度设置为视口(viewport)宽度单位而不是视口(viewport)高度来实现 - 在我的例如我将其设置为 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;
}