怎么设置子元素高度同宽度的百分比

可以使用 CSS 中的 padding 或者伪元素来实现。

1. 使用 padding

可以通过将子元素的 padding-top 或 padding-bottom 设置为一个百分比值，来使子元素的高度等于它的宽度的百分比。例如：

.parent {
  position: relative;
  width: 200px;
  height: 200px;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 100%;
  /* 或者使用 padding-bottom: 100%; */
}

如果想要子元素的高度为宽度的百分比，可以将 padding-top 或 padding-bottom 的百分比值改为需要的值。

2. 使用伪元素

可以通过为子元素添加一个伪元素，然后将伪元素的 padding-top 或 padding-bottom 设置为一个百分比值，来使子元素的高度等于它的宽度的百分比。例如：

.parent {
  position: relative;
  width: 200px;
  height: 200px;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.child::before {
  content: "";
  display: block;
  padding-top: 100%;
  /* 或者使用 padding-bottom: 100%; */
}

如果想要子元素的高度为宽度的百分比，可以将 padding-top 或 padding-bottom 的百分比值改为需要的值。

以上两种方法都可以实现子元素高度等于宽度的百分比的效果。