Question

我正在寻找针对给定问题的纯CSS解决方案。

我需要制作一个其父级x％高度的正方形。

这意味着宽度必须与其高度相匹配。

我还没有找到使用JavaScript的解决方案。

.parent{
    height: 60vh;
}

.square{
    height: 90%;
    width: (same as height)
}

Answer 1

我知道实现这一目标的唯一方法是非常hacky。

您需要为孩子添加另一个孩子，这需要是一个具有固有比率的图像。

如果图像是方形的，那么孩子将是正方形。

图像没有显示，我们只需要它在那里，所以我将不透明度设置为0。

＆＃13;

.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;
}

＆＃13;

<div class="father">
  <div class="child">
     <img src="https://i.stack.imgur.com/04i18.png">
  </div>
</div>

＆＃13;

CSS：使宽度匹配动态高度

1 个答案: