为什么柔箱内部的纵横比CSS属性有时会被忽略？
为什么柔箱内部的纵横比CSS属性有时会被忽略？
提问于 2021-08-11 10:08:47
我想保持一个5/3的纵横比在一个挠曲箱内。我希望这个盒子是屏幕高度的33%，我想把其中的两个放在另一个屏幕上，弯曲的方向设置为列。这似乎打破了高宽比。如果我设置宽度，它会再次工作。有没有一种不用用JavaScript计算宽度的方法来做到这一点？我该做点别的吗？
这里有一个代码库演示了这个问题。https://codepen.io/voxlz/pen/WNjPoqY
html：
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>css：
.parent {
display: flex;
gap: 20px;
flex-direction: column;
}
.child {
flex-grow: 0;
/* this works v, aspect perserved */
/* width: 200px; */
/* this does not v */
height: 200px;
aspect-ratio: 5/3;
background-color: blue;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-11 10:20:37
您可以将align-items属性赋予父级，然后将考虑长宽比。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68739963
复制相关文章
相似问题
腾讯云开发者
