代码之家 › 专栏 › 技术社区 › Ardeus

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

image css html

Ardeus · 技术社区 · 6 年前

如何在调整气球图像的大小时使气球图像的位置与网格图像保持一致?

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

3 回复 | 直到 6 年前

ultrarun 6 年前

在整个调整过程中的四个点使用媒体查询,即。

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

只需播放图像宽度。

max 6 年前

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

为了做到这一点,你可以设置选票宽度的百分比。

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

Nik 6 年前

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>