我有一个父容器，其子 div 设置为宽高比为 2/1。
当我沿 x 轴调整父级的大小时，子级也会相应缩放。但是，沿 y 轴调整大小不会影响子项。我该如何解决这个问题？
<!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: 50%;
height: auto;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>您的子项的指定宽度为其包含块的 50%，并且具有指定的纵横比，因此，包含块的高度不会影响子项的高度。
如果您的子项的指定高度为其包含块的 50%，并且具有指定的长宽比，则包含块的高度将影响子项，但不会影响宽度。
你不可能真正两全其美。
.parent {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
width: 50%;
height: 50%;
overflow: hidden;
box-sizing: border-box;
}
.child {
height: 50%;
aspect-ratio: 2/1;
background-color: aquamarine;
}<div class="parent">
<div class="child"></div>
</div>