无需JavaScript实现固定宽高比且高度满容器的样式方案问询

完全可以不用JavaScript实现！下面给你两种实用方案，根据你的浏览器兼容需求选择：

一、现代浏览器最优解：aspect-ratio属性 #

这是CSS原生支持的属性，简洁且易维护，Chrome 88+、Firefox 89+、Safari 15.4+都能完美运行。直接给容器设置高度和宽高比即可：

#myDiv {
  height: 100%; /* 占满外部容器的高度 */
  aspect-ratio: 2 / 1; /* 宽度 = 高度 × 2，对应你要的200%比例 */
  background-color: #f0f0f0; /* 方便可视化效果 */
}

这个属性会自动根据你设置的高度计算出对应的宽度，完全符合你的需求。

二、兼容旧浏览器的替代方案 #

如果需要支持不兼容aspect-ratio的旧浏览器（比如Safari 15.3及以下），可以利用CSS Grid和伪元素来实现：

/* 外部容器需要设置高度，比如占满视口高度，可根据实际场景调整 */
.parent-container {
  height: 100vh;
  display: grid;
}

#myDiv {
  background-color: #f0f0f0;
  grid-row: 1 / -1; /* 让容器占满父元素的高度 */
}

#myDiv::before {
  content: "";
  grid-area: 1 / 1 / -1 / -1; /* 伪元素和容器重叠 */
  padding-bottom: 50%; /* 百分比对应宽高比的倒数：1/2=50%，间接实现宽度是高度的2倍 */
}

原理是利用Grid布局让伪元素和容器共享同一网格区域，伪元素的padding-bottom会触发Grid调整容器宽度，从而间接实现基于高度的2:1宽高比。

补充说明：为什么直接用padding-left不行？ #

你之前用的padding-bottom技巧之所以能实现宽度基准的比例，是因为CSS规定所有padding的百分比值都是相对于父元素的宽度——不管是上下还是左右方向。所以padding-left:200%会基于父容器的宽度计算，而不是高度，自然达不到你想要的效果。

内容的提问来源于stack exchange，提问作者K. Kowalczyk