假设我们有响应矩形。我需要将方形元素放入矩形中,并且它应该是其高度的100%。你怎么能只用CSS(没有SVG和JS,没有固定的大小)来做呢?换句话说:使子元素的宽度等于父元素的高度?
这很容易做SVG作为子元素使用viewbox属性,但我需要纯CSS解决方案。
<div style="width: 95vw; height: 100%; border: 2px solid #f00">
<div style="border: 2px solid #0f0">I'm 100% of parent's height but also I'm not square</div>
</div>
3条答案
按热度按时间f1tvaqid1#
您可以使用aspect-ratio属性来确保内部元素始终为1:1或正方形。不过,您必须在父元素上定义一些高度。
fnx2tebb2#
现代浏览器有一个aspect-ratio属性。
如果你给予孩子100%的父母的高度,那么它的宽度将是相同的。
请注意,在你的代码片段中,没有父对象的真实的高度,所以我随意地给予了它一个高度,只是为了演示。在实际情况中,我希望父对象设置为100%会有一些东西可以设置自己。
guykilcj3#
你可以利用垫顶的特性