如何让子Div随父容器在横竖轴上按比例缩放？

问题根源 #

当前子元素设置了固定的width: 50%，高度由aspect-ratio: 2/1自动推导，这就导致子元素仅响应父容器的宽度变化——父容器高度调整时，子元素的宽度没有关联高度的约束，因此不会同步缩放。

修复方案 #

修改子元素样式，让它的尺寸同时受父容器的宽度和高度限制，在保持2/1宽高比的前提下，自动适配父容器的可用空间：

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .parent {
      display: flex;
      position: absolute;
      background-color: blue;
      width: 50%;
      height: 50%;
      resize: both;
      overflow: auto;
      align-items: center;
      justify-content: center;
    }

    .child {
      display: flex;
      position: relative;
      aspect-ratio: 2/1;
      width: auto;
      height: auto;
      max-width: 50%;
      max-height: 100%;
      background-color: aquamarine;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child">
    </div>
  </div>
</body>
</html>

原理说明 #

• 去掉固定的width: 50%，改用max-width: 50%，确保子元素宽度最大不超过父容器的一半；
• 添加max-height: 100%，限制子元素高度不超出父容器的高度；
• 保留aspect-ratio: 2/1，让浏览器自动计算对应的宽/高值；
• 设置width: auto和height: auto，让浏览器根据父容器尺寸和约束条件自动调整子元素的最终尺寸。

这样无论沿X轴还是Y轴调整父容器大小，子元素都会在约束范围内保持2/1的宽高比同步缩放。

内容的提问来源于stack exchange，提问作者MrBu