保持宽高比

为了实现一个具有固定宽高比的容器，你可以按照以下步骤定义一个名为 .box 的 CSS 类选择器，并应用相应的样式：

.box {
  margin: 0 auto;  /* 水平居中 */
  width: 90%;      /* 相对父元素宽度的 90% */
  height: 0;       /* 初始高度为 0 */
  padding-bottom: 56.25%;  /* 宽高比为 16:9，即 9/16 * 100% = 56.25% */
  position: relative;      /* 设置相对定位，用于后续绝对定位子元素 */
  overflow: hidden;        /* 隐藏溢出内容 */
}

.box::before {
  content: "";             /* 创建一个伪元素用于撑开容器高度 */
  display: block;
  padding-top: 100%;       /* 保持宽高比，与容器的 padding-bottom 值相同 */
}

.box > * {
  position: absolute;      /* 绝对定位子元素 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

通过上述样式，你可以实现一个具有固定宽高比的容器。在这个示例中，我们使用了 padding-bottom 来设置容器的高度，同时使用伪元素来撑开容器的高度，以保持宽高比。子元素可以根据需要添加到容器内，并使用绝对定位使其填充整个容器。这样，无论容器的宽度如何变化，它都会保持固定的宽高比。