我正在寻找给定问题的纯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/

10-12 04:45
查看更多