用继承制作一个方形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>