Question

我正在尝试获取一个图像来填充视口并在浏览器调整大小时自动调整大小，这是有效的，唯一的问题是由于某种原因我不能让图像不延伸到{ {1}}元素，即使它已设置为隐藏溢出，我假设它是因为我使用的是百分比而不是固定的宽度和高度？

现在当我将#wrapper放在body元素上时，它可以工作，但是当你在页面的任何地方选择文本并向下拖动时，它会向下滚动到图像的底部，这是有问题的，因为我有一个页脚菜单绝对位于屏幕底部，然后随着图像向下移动向上移动，并破坏整个效果。

所以基本上我只想要一个自动调整大小的背景，它不会溢出视口并导致滚动条，这样可以让定位的内容保持原样，而不是在向下拖动选定的文本时向上滚动。 / p>

HTML：

overflow: hidden;

CSS：

<html>
    <head>
        <title>project</title>
    </head>
    <body>
        <div id="wrapper">
            <div id="content">
                <img src="image.jpg" width="1400" height="1200" />
            </div>
        </div>
    </body>
</html>

Answer 1

我知道这是一个旧帖子，但是为了别人的利益，因为position：fixed也不是最兼容的方式，所以将#wrapper元素改为position：relative;解决了这个问题。

谢谢，斯科特

Answer 2

好的，让它工作，我改变了这个

#wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

到这个

#wrapper img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

所以我们可以看到，我改变的只是position属性，从absolute到fixed，这就是诀窍。：）

Answer 3

使用CSS背景而不是html img元素。您可以使用background-size调整图片大小。

溢出隐藏不在100％宽度和高度的容器上工作

3 个答案: