如何用CSS实现div高度随宽度线性渐变并限制最大最小高度

使用CSS原生clamp()函数结合视窗宽度单位vw即可实现需求，完全不需要JS介入，计算逻辑和aspect-ratio属性完全一致，同时自带阈值限制能力。
示例代码如下（以16:9宽高比、最小高度200px、最大高度600px为例）：

.stream-container {
  width: 100%;
  /* 公式：clamp(最小高度, 对应比例的动态高度, 最大高度) */
  height: clamp(200px, 56.25vw, 600px);
}

• 56.25vw是16:9宽高比的计算值（9/16=0.5625），完全等同于aspect-ratio: 16/9的高度计算逻辑
• 当动态计算的高度小于200px时固定取200px，大于600px时固定取600px，中间区间随窗口宽度线性变化
• 你可以根据自己需要的宽高比调整第二个参数的系数，比如4:3的比例就把56.25vw改成75vw即可
• 如果容器不是占满整个视窗宽度，比如父容器有固定左右边距，可将第二个参数替换为calc((100vw - 左右边距总和) * 比例系数)

如果需要兼容不支持clamp()的老旧浏览器，可以用JS监听窗口变化实现，示例代码如下：

<!-- HTML结构 -->
<div class="stream-container"></div>

/* 基础样式 */
.stream-container {
  width: 100%;
  min-height: 200px;
  max-height: 600px;
}

// 计算容器高度
function setContainerHeight() {
  const container = document.querySelector('.stream-container');
  // 按16:9比例计算高度，可自行修改比例值
  const calcHeight = container.offsetWidth * 9 / 16;
  container.style.height = `${calcHeight}px`;
}
// 初始化执行
setContainerHeight();
// 监听窗口resize事件，加防抖避免频繁触发
let resizeTimer = null;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(setContainerHeight, 100);
});

• CSS的min-height和max-height会自动兜底限制高度范围，不需要JS额外判断阈值
• 100ms防抖逻辑可降低窗口拖动过程中的计算频率，提升性能

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