如何使用纯JavaScript在调整div尺寸时按约束比例基于宽度适配高度？

对应需求：初始宽300px、高600px，修改宽度为400px时高度自动计算为800px，无需手动设置高度。

纯CSS方案（推荐） #

无需JS干预，直接通过样式约束宽高比，后续修改宽度时高度自动适配。

方案1：使用aspect-ratio属性（主流浏览器均支持） #

该属性直接指定元素的宽高比，高度会随宽度自动按比例计算：

.demo-div {
  /* 初始宽度300px，宽高比为1:2（300:600） */
  width: 300px;
  aspect-ratio: 1 / 2;
}

后续需要调整宽度时，仅修改width属性即可，高度自动匹配比例：

/* 宽度改为400px，高度自动计算为800px */
.demo-div {
  width: 400px;
  aspect-ratio: 1 / 2;
}

方案2：兼容旧浏览器的padding hack #

如果需要兼容不支持aspect-ratio的老旧浏览器，可通过内边距撑开高度实现比例约束：

.demo-div {
  width: 300px;
  height: 0;
  /* 高度为宽度的2倍，因此padding-top设为200% */
  padding-top: 200%;
  position: relative;
}
/* 内部内容需用绝对定位填充，避免被内边距挤开 */
.demo-inner-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

后续修改width时，高度同样会自动按2倍比例计算。

JS动态计算方案 #

如果需要动态获取初始宽高比、且频繁手动修改宽度，可通过JS监听宽度变化自动更新高度：

const targetDiv = document.querySelector('.demo-div');
// 从初始属性中计算比例：高度 / 宽度 = 600 / 300 = 2
const heightRatio = targetDiv.offsetHeight / targetDiv.offsetWidth;

// 封装高度更新方法
function syncHeight() {
  const currentWidth = targetDiv.offsetWidth;
  targetDiv.style.height = currentWidth * heightRatio + 'px';
}

// 监听元素宽度变化（比window resize更精准，只监听目标元素）
const resizeObserver = new ResizeObserver(syncHeight);
resizeObserver.observe(targetDiv);

// 手动修改宽度时无需手动计算高度，监听会自动触发更新
// 比如设置宽度为400px，高度自动变为800px
targetDiv.style.width = '400px';

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