首页 文章

CSS纵横比与最大高度

提问于
浏览 次
1

我有一个部分，我想使用纵横比进行缩放，但也保持在最大和最小高度 . 不知何故，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>

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

enter image description here

有任何想法吗？

css aspect-ratio

1 回答

  • 0

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

相关问题