html - 随着屏幕变得更窄，图像会向右插入额外的空间

Question

我现在正在开发一个响应式网站，基本上是 this is happening .我希望图片保持在 1900 像素的位置，但由于某种原因，随着屏幕变小，图片似乎停留在原来的位置，我不知道为什么。我已经尝试改变我能想到的一切。也许有更多经验的人会看到我做错了什么。我觉得我以前遇到过这个问题，但我不记得我做了什么来解决它。

HTML5

<div id="content">
    <div id="content-box">
        <img id="outside" alt="Outside Header" src="images/outside-guy.png">
        <!-- #BeginEditable "content" -->
        <h1 class="center">Add your title here</h1>
        <p>Add your text here</p>
        <!-- #EndEditable -->
    </div>
</div>

CSS 3

/* ===== CONTENT AREA ===== */
#content {
    background-color: #FFFFFF;
    margin: 2% auto;
    padding: 10px 25px;
    width: 88%;
}
#outside {
    width: 750px;
    position: relative;
        bottom: 65px;
        left: 125px;
}
/* ===== SECTION BLOCKS ===== */
#content-box {
    bottom: 60px;
    margin: 0 auto;
    position: relative;
    width: 60%;
}

我通过在内容区域周围放置一个 980px 的包装解决了这个问题。这允许图像保持固定，直到媒体在那一点开始并且 margin: 0 auto 在包装器上将内容拉到区域的中间。谢谢你们的帮助。

Answer 1

我认为这是因为您给它设置了固定宽度 (750 像素)。尝试给它一个 % 宽度，看看它是否能正确调整大小？