如何将正方形放入矩形以匹配其高度?

Question

假设我们有一个响应矩形。我需要把正方形元素放入矩形中它的高度应该是它的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>

Answer 1

您可以使用宽高比属性来确保内部元素始终是1:1或正方形。你必须在你的父元素上定义一些高度。

* {
box-sizing: border-box;
}
.parent {
width: 95vw;
height: 100px;
border: 2px solid #f00;
}
.child {
aspect-ratio: 1/1;
height: 100%;
border: 2px solid #0f0;
}

<div class="parent">
<div class="child">I'm 100% of parent's height and square</div>
</div>

Answer 2

现代浏览器都有一个aspect-ratio属性。

如果你给子元素的高度是父元素的100%，那么它的宽度也会相同。

注意，在你的代码片段中没有父元素的实际高度，所以我随意地给它一个高度，只是为了演示。在实际情况中，我希望父母设置的100%应该有一些东西可以设置。

<div style="width: 95vw; height: 300px; border: 2px solid #f00">
<div style="border: 2px solid #0f0; aspect-ratio: 1 / 1; height: 100%;">I'm 100% of parent's height but also I'm not square</div>
Get </div>

Answer 3

可以使用padding-top属性

<div class="rectangle">
<div class="square"></div>
</div>

.square {
position: absolute;
top: 0;
left: 0;
width: 100%; 
height: 100%; 
background-color: red;
}
.rectangle {
position: relative;
width: 0;
height: 100%;
padding-top: 100%; 
}