如何设置高度等于动态宽度纯 CSS

在前端开发中，经常需要设置元素的宽度等于高度。但是当高度需等于动态的宽度时，可能会遇到一些困难。本文介绍一种使用纯 CSS 实现高度等于动态宽度的方法。

方法一：使用 padding 百分比

可以使用 padding 的百分比值来同时控制宽度和高度。当 padding 值相同时，宽度和高度相等。但是当 padding 值不同时，宽度和高度会有所区别。所以需要设置 padding 值为百分比。

.box {
  width: 50%;
  padding-top: 50%;
}

如上所示，父元素的宽度为 50%，padding-top 值也为 50%，则高度等于宽度。

方法二：使用 aspect-ratio 属性

aspect-ratio 属性是一种比较新的 CSS 属性，用来控制元素的长宽比。可以将其应用于一个带有伪元素的容器上，然后通过给容器设置高度来将高度保持等于宽度。

.box {
  width: 50%;
  position: relative;
  overflow: hidden;
}
.box::before {
  content: '';
  display: block;
  padding-top: 100%;
}
.box > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: pink;
  aspect-ratio: 1 / 1;
}

如上所示，通过给容器设置 before 伪元素，将其 padding-top 设置为 100%，以保持长宽比为 1:1。然后将后代 div 元素的 width 和 height 分别设置为 100%，再使用 aspect-ratio 属性将长宽比重置为 1:1。最终通过绝对定位让 div 填充整个容器。

以上就是两种实现高度等于动态宽度的纯 CSS 方法。希望对你有所帮助。