1

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

如果你理解我。

我当前的代码：

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

2 回答 2

3

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

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
}
于 2013-04-20T09:24:07.587 回答
0

在这种情况下，您应该使用跨越您的内容的容器元素。例如

<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;
 }

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

玩得开心:)

于 2013-04-20T09:38:15.673 回答