Question

我正在开发一个基本的html页面，我还在学习HTML。无论如何，我在我的页面上有两个图像，我已经放置在我想要的位置但问题是，如果你调整网页/浏览器的大小，图像就不再处于正确的位置了。或者它是因为我给它一个带有像素的特定位置，但我希望它保持在同一位置，无论浏览器窗口有多大。

如果你了解我。

我目前的代码：

<div style="position: absolute; left: 590px; top: 320px;">
<img src="map.png" width="215" height="202">
</div>

Answer 1

您必须使用百分比，例如：

<强> HTML

<img class="imageEl" src="folder-image-transp.png" width="215" height="202">

<强> CSS

img.imageEl{
   position:absolute;
   left: 50%;
   top: 50%;
}

如果您希望元素保留在屏幕中间，则还必须应用大至图像一半的边距。例如：

img.imageEl{
   position:absolute;
   left: 50%;
   top: 50%;
   margin-left: -(Half of image width)px
   margin-top:  -(Half of image height)px
}

Answer 2

你应该使用一个容器元素，在这个例子中你的内容会围绕你的图像。 e.g。

<div id="wrap">
 <img src='' alt=''/>
</div>

现在动态定位你的#wrap，将你的img绝对放在包装中。

#wrap {
  position: relative;
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
 }

 #wrap img {
   position: absolute;
   top: abc;
   left: abc;
 }

通过这种方式，您可以确保自己的设计保持响应，但也可以保持对网站的想法。

玩得开心：）

图像在html中保持相同的位置

2 个答案: