调整窗口大小时图像移动答案

【问题标题】：Image moving when resizing window调整窗口大小时图像移动
【发布时间】：2013-01-03 05:28:06
【问题描述】：

我多次尝试让我的网站上的图像在调整窗口大小时不移动 - 没有运气。

我“只是”希望这张图片完全保持在同一个地方，而不管窗口大小。

这是我想要在顶部的图像“kranz”，在文本“本周的英雄”之上。如您所见，文本停留在同一位置。

如果您有任何建议或解决方案，我很乐意听到！

jsfiddle.net/VDfN4

谢谢！

【问题讨论】：

【解决方案1】：

很难用当前的代码来判断你想要完成什么，但据我所知，问题可能是因为#kranz img 上的绝对定位。尝试使用 position:relative 或将 kranz div 包装在另一个 position:relative 的 div 中。

【讨论】：

【解决方案2】：

不要使用百分比来展示位置。

#kranz img {
 position:absolute;
left:42%;
margin-left:-50px;
margin-top:-13%;
width:275px;
}

左边：42% 是容器宽度（或窗口宽度）的 42%，margin-top 是容器高度（或窗口高度）的 13%....所以如果窗口调整大小并且容器调整大小测量值发生变化。使用像素或其他一些绝对度量，而不是百分比等相对度量。

【讨论】：