在CSS中，如果你想设置一个元素的高度（height）与其宽度（width）相匹配，但又希望宽度使用百分比来定义，你可以通过几种方式来实现。

1 使用 aspect-ratio 属性（现代浏览器推荐）

.box {width: 50%; /* 百分比宽度 */aspect-ratio: 1 / 1; /* 宽高比1:1强制等高 */
}

2 使用 CSS 变量（维护方便）

.box {--size: 50%; /* 定义统一比例 */width: var(--size);height: 0;padding-top: var(--size); /* 应用相同比例 */
}

3 使用 padding-top 技巧（兼容性好）

原理：padding-top 百分比值基于‌父容器宽度‌计算，与 width 使用相同参照物，从而实现等宽高正方形。

.box {width: 50%; /* 百分比宽度 */height: 0; /* 高度设为0 */padding-top: 50%; /* 关键：用padding撑开高度（值=宽度百分比）*/position: relative; /* 为内部内容定位做准备 */
}/* 内部内容容器（可选） */
.box .content {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}

4 JavaScript动态计算（响应式场景）

<div class="box" id="responsiveBox"></div>
function setHeight() {const box = document.getElementById('responsiveBox');box.style.height = box.offsetWidth + 'px'; // 高度=宽度
}window.addEventListener('resize', setHeight);
setHeight(); // 初始化