Question

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

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的包装来解决问题。这允许图像保持固定，直到媒体在该点开始并且包装器上的边距：0自动将内容拉到该区域的中间。谢谢你的帮助。

Answer 1

我认为这是因为你给它一个固定的宽度（750像素）。尝试给它一个％宽度，看看它是否正确调整大小？

当屏幕变得更窄时，图像会推动额外的空间

1 个答案: