Question

我想将图钉（PNG）的图像修复到地图上的位置。我已经能够沿x轴正确固定销钉，但是当窗口调整大小时，我遇到了沿Y轴移动的问题。

这是我想要完成的一个例子。在这个例子中，我想确保引脚始终保持在MO。但是bottom: 45%导致图像在调整窗口大小时沿Y轴移动。

＆＃13;

#img1 {
  width: 100%;
  position: relative;
}

#img2 {
  width: 15%;
  position: absolute;
  left: 48%;
  bottom: 45%;
}

＆＃13;

<div>
  <img id="img1" src="http://americandreamreschool.com/map/Help/assets/images/simple.png">
  <img id="img2" src="https://image.flaticon.com/icons/png/128/149/149440.png" >
</div>

＆＃13;

当调整窗口大小时，如何确保图像相对于另一个图像保持在相同的Y轴？

任何帮助表示赞赏，

由于

Answer 1

将标记置于绝对位置，但它应与父div

相关

然后相应地调整标记百分比。

div {
  position: relative;
}

#img1 {
width:100%;
}

#img2 {
  width: 5%;
  position: absolute;
  left:52%;
  top:37%;
}

<div>
  <img id="img1" src="http://americandreamreschool.com/map/Help/assets/images/simple.png">
  <img id="img2" src="https://image.flaticon.com/icons/png/128/149/149440.png" >
</div>

Codepen Demo

Similar Demo

将图像固定在另一个图像的顶部（响应）？

1 个答案: