javascript - 以 % 为单位的 CSS 宽度和以 px 为单位的高度，两者的长度相同

Question

<分区>

Answer 1

你可以使用顶部/底部 padding以百分比表示的属性，以实现结果。

Example Here .

.box {
    width: 25%;
    padding-bottom: 25%;
}

A percentage value在顶部/底部 padding或 margins是相对于框的包含 block 的宽度。

8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'

<percentage> The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.

---

添加内容

由于盒子的高度会随着内容的增加而增加，我们可以用元素包裹内容 .wrapper并相对于盒子绝对定位，然后使用 top , right , left和 bottom填充框的整个空间的属性。

Example Here

<div class="box">
  <div class="wrapper">
    <!-- content goes here... -->
  </div>
</div>

.box {
  width: 25%;
  position: relative;
}

.box:after {
  content: "";
  display: block;
  padding-top: 100%; /*  1:1 square */
}

.box > .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

---

更多信息您可以引用my answer here (响应式容器部分)。