图像不根据显示器显示移动答案

【问题标题】：Images don't move according to monitor display图像不根据显示器显示移动
【发布时间】：2014-07-19 01:13:46
【问题描述】：

我在网站的图片定位方面遇到问题。我已经将它设置在与背景和显示器尺寸相关的正确位置。但是我今天在screenfly上测试了它，结果不同。我的目标是让图像自动在屏幕上移动，以适应更大显示器的需求（如果需要）。所以总而言之，我所追求的是一些代码，可以让我的图像自动重新定位以适应更大的显示器。网址是www.mustownit.com

我以前在更大的显示器上看到我的网站的网站是Screen Fly

    <!doctype html>
<html>
<head>
  {{content_for_header}} 
<meta charset="utf-8">
<title>Untitled Document</title>

<style type="text/css">
body {
    background-image: url(https://cdn.shopify.com/s/files/1/0519/8985/files/dK8eAz1.jpg?6056);
    background-repeat: repeat;
}
</style>
</head>

<body>
  {{content_for_body}} 
  {{content_for_layout}} 
<div style="position:absolute"></div>
<span style="position: absolute; left: 243px; top: 161px;"><img src="https://cdn.shopify.com/s/files/1/0519/8985/files/theinternetschoice.png?6056" width="614" height="76" alt=""/></span>

<div style="position:absolute"></div>
<span style="position: absolute; left: 112px; top: 14px;"><img src="https://cdn.shopify.com/s/files/1/0519/8985/files/xuWE8Qe.png?6056" width="884" height="129" alt=""/></span>
</body>
</html>

【问题讨论】：

在哪里以及如何重新定位？现在，您使用的是绝对定位，因此图像当然不会根据窗口大小重新定位。请澄清您的问题。
你几乎总结了我想要的。例如，我想要一个能够将我的代码保持在页面的相同相对位置的代码。我在小显示器上的页面角落有一张图像，然后在大显示器上出现某人，图像突然出现在页面中间。我怎样才能阻止这个？感谢您的回复@EdCottrell
您需要更加具体。如果您使用绝对定位，图像将始终位于给定坐标处。您需要准确指定图像应该在哪里，否则我们无法为您提供帮助。
抱歉这个非常模糊的问题，我正在寻找这些图像“必须拥有它”在这里i.gyazo.com/f53d9b09d98db19990e123d2f0652809.png 始终停留在页面的右上角。因为当我在大型显示器上测试它时，图像突然出现在页面中间。 @EdCottrell
我在您的 HTML 中看不到该图像，但听起来您只需要更改一个绝对位置即可设置right 坐标，而不是left。如果您可以准备一个显示几个占位符图像的 jsFiddle，它会更容易提供帮助。

标签： javascript html css

【解决方案1】：

我真的不明白你的意思，但我有解决方案，可能是你需要的。将此代码添加到您的 CSS 并尝试一下

background-size : cover

你的代码将是：

<style type="text/css">
body {
    background-image: url(https://cdn.shopify.com/s/files/1/0519/8985/files/dK8eAz1.jpg?6056);
    background-repeat: repeat;
    background-size : cover ;
}
</style>

如果这不是您需要的，请给我更多解释。祝你有美好的一天。

【讨论】：