DIV中可调整大小的背景图像，里面有位置相对元素

Question

我正在开发一个具有类似锅炉房模式的应用程序。 https://www.solarfocus.com/website/var/tmp/image-thumbnails/0/390/thumb__product-detail-fancybox/schema_elegance_01.jpeg

我会认为图像总是占用100％的宽度，但我不知道该怎么做。

此外，如果图像可调整大小，则div内的位置相对div将无法正确放置。

我真的需要一个建议。

HTML：

.boiler_room_image {
  position: absolute;
  background-image: url('images/boiler_room_schema.jpeg');
  height: 700px;
  width: 870px;
}

.HVAC_LINE1_TEMP_ACT {
  position: relative;
  top: 270px;
  left: 270px;
  font-weight: bold;
}

.HVAC_VALVE_01_STS {
  position: relative;
  top: 208px;
  left: 710px;
  font-weight: bold;
}

.HVAC_VALVE_02_STS {
  position: relative;
  top: 405px;
  left: 165px;
  font-weight: bold;
}

.HVAC_VALVE_03_STS {
  position: relative;
  top: 300px;
  left: 710px;
  font-weight: bold;
}

<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>

最诚挚的问候， 扬

Answer 1

您可以使用：

background-size: cover;

在.boiler_room_image中，那就可以了。