我正在寻找给定问题的纯CSS解决方案。
我需要制作一个其父级高度为x%的正方形。
这意味着宽度必须与其高度匹配。
我还没有找到使用JavaScript的解决方案。
.parent{
height: 60vh;
}
.square{
height: 90%;
width: (same as height)
}
最佳答案
我知道实现这一目标的唯一方法是很棘手。
您需要向该孩子添加另一个孩子,并且这需要是一个具有固有比率的图像。
如果图像是正方形的,那么孩子将是正方形的。
图片未显示,我们只需要将其放在此处即可,因此我将不透明度设置为0。
.father {
height: 300px;
width: 300px;
border: solid 1px black;
}
.child {
border: solid 1px blue;
background-color: lightblue;
height: 90%;
width: fit-content;
}
.child img {
height: 100%;
opacity: 0;
}
<div class="father">
<div class="child">
<img src="https://i.stack.imgur.com/04i18.png">
</div>
</div>
关于css - CSS:使宽度匹配动态高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49235390/