css 宽度屏幕50%，高度等于宽度的50%，窗口变化，比例不变（宽度百分比，高度等比例自适应）
方案一：aspect-ratio
方案二：“包含块”
代码
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>响应式等比例高度示例</title><style>html,body {margin: 0;padding: 0;}.container {display: flex;gap: 16px;padding: 16px;box-sizing: border-box;}/*两个盒子：宽度 50%，高度随宽度等比例变化。选择 2:1 的宽高比（height = width / 2），当视口宽度为 1200px 时，盒子宽度 50% = 600px，高度即为 300px。*/.box {width: 50%;aspect-ratio: 2 / 1; /* 保持等比例：height = width / 2 */background: #f2f3f5;border: 1px solid #dcdfe6;display: flex;align-items: center;justify-content: center;color: #606266;box-sizing: border-box;overflow: hidden;font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Microsoft Yahei', 'PingFang SC', sans-serif;}/* 小屏下可选：纵向排布，仍保持等比例 *//* @media (max-width: 640px) {.container { flex-direction: column; }.box { width: 100%; }} *//* 兼容不支持 aspect-ratio 的旧浏览器（可选）padding-top: 50% 的百分比是相对“包含块”的宽度计算的，通常就是相对父元素（这里的 .container ）的宽度，而不是相对 .box-no-aspect 自身的宽度 */.box-no-aspect {/* 将高度设为 0，用 padding-top 撑出高度 */height: 0;/* padding-top: 50% 的百分比是相对“包含块”的宽度计算的，通常就是相对父元素（这里的 .container ）的宽度，而不是相对 .box-no-aspect 自身的宽度 */padding-top: 25%; /* 2:1 宽高比 => 高度 = 宽度的 50% */position: relative;width: 50%;background: #f2f3f5;border: 1px solid #dcdfe6;overflow: hidden;color: #606266;box-sizing: border-box;font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Microsoft Yahei', 'PingFang SC', sans-serif;}.box-no-aspect > .content {/* 让内容居中覆盖 */position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}</style></head><body><div class="container"><div class="box">Box 1（宽 50%，高随宽等比例变化）</div><div class="box">Box 2（宽 50%，高随宽等比例变化）</div></div><div>以下为不支持 aspect-ratio 的备用写法示例</div><div>padding-top: 50% 的百分比是相对“包含块”的宽度计算的，通常就是相对父元素（这里的 .container ）的宽度，而不是相对 .box-no-aspect 自身的宽度</div><div class="container"><div class="box-no-aspect"><div class="content">Box 1（fallback）</div></div><div class="box-no-aspect"><div class="content">Box 2（fallback）</div></div></div></body>
</html>
大屏幕等比例也可以参考它来布局
https://yyhsong.github.io/iDataV/