背景图自适应DIV宽度及内部相对定位元素适配问题咨询

嘿Jan，我来帮你搞定这两个头疼的问题——让锅炉房布局图始终占满100%宽度，同时让内部的温度、阀门状态元素在图片缩放时保持正确位置。咱们拆解问题逐个解决：

一、让背景图自适应100%宽度并保持比例 #

你的原代码里给容器设置了固定宽高，这会导致图片无法跟着屏幕宽度缩放。我们可以通过宽高比容器技巧来解决：

• 把容器的position改为relative（作为内部元素的定位基准）
• 去掉固定的width和height，改用max-width: 100%让容器占满父容器宽度
• 用padding-top维持图片的原始宽高比（计算方式：图片高度/图片宽度*100%，你的图是700/870≈80.46%）
• 背景图设置background-size: 100% 100%让它填满容器，加上background-repeat: no-repeat避免重复

二、修复内部元素的定位错位问题 #

原代码里用position: relative给元素定位，且用固定像素值的top/left，这会导致容器缩放时元素位置不跟着变化。我们改成基于百分比的绝对定位：

• 把内部元素的position改为absolute，这样它们会相对于父容器（.boiler_room_image）定位
• 把原来的固定像素top/left转换成百分比（基于容器的宽高），这样容器缩放时，元素位置会按比例自动调整

修改后的完整代码 #

CSS：

.boiler_room_image {
  position: relative;
  max-width: 100%;
  padding-top: 80.46%; /* 700/870*100%，维持原图宽高比 */
  background-image: url('images/boiler_room_schema.jpeg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.HVAC_LINE1_TEMP_ACT {
  position: absolute;
  top: 38.57%; /* 270/700*100% */
  left: 31.03%; /* 270/870*100% */
  font-weight: bold;
}

.HVAC_VALVE_01_STS {
  position: absolute;
  top: 29.71%; /* 208/700*100% */
  left: 81.61%; /* 710/870*100% */
  font-weight: bold;
}

.HVAC_VALVE_02_STS {
  position: absolute;
  top: 57.86%; /* 405/700*100% */
  left: 18.97%; /* 165/870*100% */
  font-weight: bold;
}

.HVAC_VALVE_03_STS {
  position: absolute;
  top: 42.86%; /* 300/700*100% */
  left: 81.61%; /* 710/870*100% */
  font-weight: bold;
}

HTML：

<div class="boiler_room_image">
  <div class="HVAC_LINE1_TEMP_ACT">25.6°C</div>
  <div class="HVAC_VALVE_01_STS">OFF</div>
  <div class="HVAC_VALVE_02_STS">OFF</div>
  <div class="HVAC_VALVE_03_STS">OFF</div>
</div>

额外小贴士 #

• 如果背景图拉伸后看起来变形，你可以把background-size: 100% 100%改成background-size: cover，但这样可能会裁剪部分图片；或者用contain保证图片完整显示，但容器可能出现留白，根据你的需求选择。
• 百分比计算时可以保留更多小数位，让定位更精准。

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