做方块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>