使元素按比例自适应缩放

使用padding和百分比的方式

要实现宽高按照比例自适应的效果，你可以使用CSS中的padding和百分比单位来实现。下面是一种常见的方法：

<div class="container">
  <div class="content"></div>
</div>

.container {
  position: relative;
  width: 100%; /* 容器的宽度 */
  padding-top: 75%; /* 容器的高度，根据宽高比例设置 */
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 内容的宽度 */
  height: 100%; /* 内容的高度 */
}

在上面的示例中，.container是包含内容的容器，.content是实际的内容元素。通过设置.container的padding-top为一个百分比，可以实现容器的高度按照宽高比例自适应的效果。例如，如果设置padding-top: 75%，则容器的高度将为宽度的75%。

在.content元素中，使用position: absolute将其脱离文档流，并通过top: 0和left: 0将其定位到容器的左上角。然后，将宽度和高度都设置为100%，使内容元素填充整个容器。

这样，当容器的宽度改变时，容器的高度会根据设定的宽高比例自动调整，保持内容的比例不变。你可以根据需要调整.container的宽度和padding-top的百分比来适应你的设计需求。

其他方式

以下是另外两种常见的方法：

1. 使用CSS的aspect-ratio属性： 最新的CSS规范中引入了aspect-ratio属性，可以直接设置元素的宽高比例。你可以将其应用于容器元素或内容元素，具体取决于你的需求。例如：

   .container {
     width: 100%; /* 容器的宽度 */
     aspect-ratio: 16/9; /* 宽高比例 */
   }
   

   在这个例子中，容器的宽度设置为100%，然后使用aspect-ratio属性将容器的宽高比例设置为16:9。这样，当容器的宽度改变时，高度会自动根据宽高比例进行调整。

2. 使用伪元素和padding百分比： 这种方法使用伪元素和padding百分比来实现宽高比例自适应。你可以将伪元素插入到容器中，并设置其padding百分比来控制高度。例如：

   <div class="container">
     <div class="content"></div>
   </div>
   

   .container {
     position: relative;
     width: 100%; /* 容器的宽度 */
   }
   
   .container::before {
     content: "";
     display: block;
     padding-top: 75%; /* 容器的高度，根据宽高比例设置 */
   }
   
   .content {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%; /* 内容的宽度 */
     height: 100%; /* 内容的高度 */
   }
   

   在这个例子中，通过在容器中插入一个伪元素.container::before，并设置其padding-top为一个百分比，来控制容器的高度。然后，将内容元素.content定位到容器的左上角，宽度和高度都设置为100%。

这些方法都可以实现宽高按照比例自适应的效果，你可以根据具体的需求选择适合你的方式。