css - 使用继承或某物制作方形 div？ (没有js)

Question

有没有办法读取宽度并设置具有相同值的高度？我知道 viewportheight[vh] 和 [vm] 的技巧，但在这里效果不佳。

Answer 1

您可以利用在 padding-bottom: 100% 中百分比是宽度的百分比而不是高度这一事实来做到这一点。所以用 padding-bottom: 100% 设置一个伪元素会根据宽度改变高度。内容可以在绝对位置层。

(我添加了一点悬停动画来演示改变宽度也会改变高度)

.container {
  position: relative;
  width: 100px;
}

.container:hover {
  width: 150px;
  transition: width 2s;
}

.container::before {
  display: block;
  padding-bottom: 100%;
  content: '';
}
.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: red;
}

<div class="container">
  <div class="content">

  </div>
</div>