<分区>
标签 css aspect-ratio
<分区>
是否有机会使用 max-height 选项保持 DIV 的纵横比？
有一个解决方案来保持纵横比:
div.stretchy-wrapper {
position: relative;
width: 100%;
padding-bottom: 75%;
background:gold; /** <-- For the demo **/
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
它工作完美，但如果想保持 DIV 可调整大小但达到一定高度怎么办？假设我希望 DIV 在其高度达到 200px 时停止调整大小。有任何想法吗？提前谢谢你。
最佳答案
因为您要保持恒定的纵横比，只需计算出元素的宽度在您想要的最大高度处是多少，然后设置 max-width 属性。
在这种情况下，要阻止 div 在它达到 200px 高时调整大小，您需要设置 max-width: 266.666px。
.stretchy-wrapper {
position: relative;
width: 100%;
max-width: 266.666px;
}
.ratio {
position: relative;
width: 100%;
padding-bottom: 75%;
background: gold;
}<div class='stretchy-wrapper'>
<div class='ratio'>
</div>
</div>关于css - 使用 CSS 保持 div 的纵横比，并设置最大高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35467222/