使用 css 自动缩放 div

Question

我有多个 div，里面有一个背景图片。此背景图像具有一定的高度和宽度，并且在其上方放置了绝对元素。

要求是需要使背景图像 div

.container

适合相应的父元素，如

.first

,

.second

,

.third

.

我试过使用像

transform: scale(0.8)

这样的比例，但它不是所有 div 的统一宽度。

如果我给

width: 100%

.container

然后

position:absolute

元素被扭曲并放置在不同的位置。

有没有办法根据父div的宽度动态计算scale值并添加到值

transform: scale(dynamicValue)

？

请帮助我实现制作背景图像 div

.container

以占据父级宽度的结果，如

600

，

1024

，

1200

.

工作示例：

.first {
  width: 600px;
  border: 2px solid #000;
  margin: 30px;
}

.second {
  width: 1024px;
  border: 2px solid #000;
  margin: 30px;
}

.third {
  width: 1200px;
  border: 2px solid #000;
  margin: 30px;
}


.container {
    background-image: url('https://i.stack.imgur.com/AfygH.png');
    height: 401px;
    width: 688px;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;
}

.coil {
    position: absolute;
    top: 49.55%;
    left: 24.3%;   
}
.evaporator {
    position: absolute;
    top: 7.25%;
    left: 54.5%;
}
.compressor {
    position: absolute;
    top: 53.15%;
    left: 59.2%;
}

<div class="first">
<div class="container">
  <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
</div>
</div>


<div class="second">
<div class="container">
  <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
</div>
</div>

<div class="third">
<div class="container">
  <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
</div>
</div>