CSS position: relative场景下如何实现内层div相对于背景图片定位

核心思路是先让外层容器和背景图的宽高比完全匹配，再用百分比单位做内层定位，就能保证缩放时位置永远精准，无需使用vh单位。

计算逻辑 #

已知背景图尺寸为1783px（宽）×1481px（高），内层div的坐标参数可换算为相对背景图的百分比值：

• 左偏移：左上角x坐标 / 背景图宽度 = 397 / 1783 ≈ 22.27%
• 上偏移：左上角y坐标 / 背景图高度 = 318 / 1481 ≈ 21.47%
• 宽度：(右上角x坐标 - 左上角x坐标) / 背景图宽度 = (1140 - 397) / 1783 ≈ 41.67%
• 高度：(左下角y坐标 - 左上角y坐标) / 背景图高度 = (903 - 318) / 1481 ≈ 39.5%

完整代码 #

#outer {
  position: relative;
  background-image: url(https://jrwr.io/terminal.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* 替换原来的height:100vh，让容器和背景图同宽高比 */
  aspect-ratio: 1783 / 1481;
  width: 100%;
  max-height: 100vh;
  margin: 0 auto;
  display: block;
}

#inner {
  position: absolute;
  /* 用换算后的百分比定位 */
  top: 21.47%;
  left: 22.27%;
  width: 41.67%;
  height: 39.5%;
  /* 可根据需求自定义内层样式 */
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
}

<div id="outer">
  <div id="inner">Example Text here</div>
</div>

为什么不用vh单位？ #

vh只和视口高度挂钩，当窗口宽度较窄时，background-size:contain会优先把背景图宽度压缩到窗口宽度，此时背景图的实际高度会小于100vh，用vh定位的内层元素就会和背景图的目标区域发生偏移。而我们让外层容器和背景图保持完全相同的宽高比，容器尺寸永远等于背景图的实际显示尺寸，用百分比定位可以保证不管窗口如何缩放，内层都精准落在指定区域。

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