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

时间:2018-01-26 15:28:46

标签: html css background-image image-resizing resizable

我正在开发一个具有类似锅炉房模式的应用程序。 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>

最诚挚的问候, 扬

1 个答案:

答案 0 :(得分:0)

您可以使用:

background-size: cover;

在.boiler_room_image中,那就可以了。