CSS图像在响应图像顶部的绝对位置

Question

在调整气球图像的大小时，如何使气球图像的位置保持在网格图像上？

Balloon1和B2实际上位于第5网格和第7网格内，但是如果左右调整大小，Balloons将越位。

我需要专用的calc或javascript / jquery库吗？

谢谢。

updated fiddle

.container{
  max-width:600px;
  max-height:400px;
}
.image-container{
  width:70%;
  float:left;
  position:relative;
}
.img-grid{
  max-width:100%;
  max-height:100%;
}
.balloon{
  position:absolute;
  left:30%;
  top:50%;
}
.balloon2{
  position:absolute;
  left:60%;
  top:15%;
}

Resize this area
<div class= "container">
  <div class="image-container">
       <img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
       
       <img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
       <img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
  </div>
  <div class="text-container">
  
  </div>
</div>

Answer 1

在整个调整期间，例如在四个点使用媒体查询，即

@media only screen and (max-width: 600px) {
img{width:60%;height:auto;}
}

只是玩弄图像的宽度。

Answer 2

当图像变小时，必须减小气球的大小。

为此，您可以按百分比设置气球宽度。

.container{
  max-width:600px;
  max-height:400px;
}
.image-container{
  width:70%;
  float:left;
  position:relative;
}
.img-grid{
  max-width:100%;
  max-height:100%;
}
.balloon{
  position:absolute;
  left:30%;
  top:50%;
  width: 6%;
}
.balloon2{
  position:absolute;
  left:60%;
  top:15%;
  width: 6%;
}

Resize this area
<div class= "container">
  <div class="image-container">
       <img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
       
       <img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
       <img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
  </div>
  <div class="text-container">
  
  </div>
</div>

Answer 3

Here更新了小提琴。

希望这就是您想要的。我将图像宽度设置为8％，以便在调整屏幕大小时进行调整。

.container{
  max-width:600px;
  max-height:400px;
}
.image-container{
  width:70%;
  float:left;
  position:relative;
}
.img-grid{
  max-width:100%;
  max-height:100%;
}
.balloon{
  position:absolute;
  left:30%;
  top:50%;
  width: 8%;
}
.balloon2{
  position:absolute;
  left:60%;
  top:15%;
  width: 8%;
}

Resize this area
<div class= "container">
  <div class="image-container">
       <img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
       
       <img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
       <img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
  </div>
  <div class="text-container">
  
  </div>
</div>