html - Css 图像在响应图像顶部的绝对位置

Question

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

气球 1 和 B2 实际上位于网格 5 和 7 内，但如果左右调整大小，气球将越位。

为此我需要一个特殊的 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;}
}

只需调整图像宽度即可。