如何让绝对定位元素随浏览器缩放按比例调整尺寸？

嘿，我完全懂你现在的困扰：你有个相对定位的容器，里面放了自适应的背景图，但那些绝对定位的元素还是固定尺寸，窗口一缩放就全乱了，没法和背景图保持原本的相对比例和位置。别担心，咱们用CSS的百分比单位和宽高比技巧就能搞定！

核心思路 #

问题出在你给绝对定位元素用了固定的px尺寸，而且父容器的高度是固定值——咱们得把这俩都改成相对比例，让所有元素都跟着容器的缩放走：

• 父容器放弃固定高度，用padding-top来维持和背景图一致的宽高比（你的背景图是600x300，比例是2:1，所以padding-top: 50%）
• 绝对定位元素的尺寸和位置都用百分比，自身的宽高比用aspect-ratio（现代浏览器支持）或者padding-top来维持
• 背景图继续用background-size: contain保证自适应

修改后的完整代码示例 #

<div style="position: relative; width: 100%; padding-top: 50%;">
  <!-- 背景图容器：绝对定位铺满父容器 -->
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;
              background: transparent url('http://via.placeholder.com/600x300') no-repeat;
              background-size: contain; background-position: center;"></div>
  
  <!-- 第一个绝对定位元素：宽高比4:3，位置相对于父容器 -->
  <div style="position: absolute; top: 16.67%; left: 8.33%;
              width: 16.67%; aspect-ratio: 4/3;
              background: green;"></div>
  
  <!-- 第二个示例元素：用padding-top维持宽高比（兼容旧浏览器） -->
  <div style="position: absolute; top: 50%; left: 50%;
              width: 20%; padding-top: 15%;
              background: blue;">
    <!-- 如果需要在里面放内容，给内容加绝对定位铺满 -->
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;
                display: flex; align-items: center; justify-content: center;
                color: white;">示例内容</div>
  </div>
</div>

关键细节解释 #

• 父容器的padding-top: 50%：因为百分比是相对于宽度计算的，50%正好对应背景图300/600的高度比例，这样父容器会永远保持2:1的宽高比，不管窗口怎么缩
• 绝对定位元素的百分比位置：比如top: 16.67%是原50px/300px（背景图高度）的比例，left:8.33%是原50px/600px（背景图宽度）的比例，这样位置会和背景图始终对齐
• aspect-ratio:4/3：直接指定元素的宽高比（100:75就是4:3），现代浏览器都支持；如果要兼容旧浏览器，就用padding-top:75%代替height，因为padding-top百分比也是相对宽度计算的
• 背景图容器改成绝对定位：因为父容器用了padding-top撑高度，直接放背景图会被padding挤下去，所以绝对定位铺满父容器就能完美显示

这样调整后，不管你怎么缩放浏览器窗口，绝对定位元素都会跟着背景图一起缩放，比例和相对位置都不会乱！

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