Question

wetransfer网站通常具有可在您调整浏览器大小时缩放的背景图片。我想以最简单的方式达到同样的效果。换句话说，如果我拖动浏览器窗口的底角，我希望背景图像的大小会相应改变。

谢谢！

Answer 1

您可以按照此tutorial中的说明执行此操作。

在本教程中，简单的CSS方法是使用background-size属性。

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

封面可在保持纵横比的同时拉伸图像，从而充分利用包含区域的一个维度。替代值包含，它将图像的纵横比拉伸到完全适合该区域，或100％100％拉伸图像同时破坏纵横比。

您可能还想查看w3schools

上的CSS 3参考

Answer 2

您甚至不需要使用JS。 CSS3将为您完成：

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Answer 3

我最近制作了一个jQuery全屏内容滑块，它使用全屏图像，因此我在这个安静的环境中进行了很多研究。

在浏览了无数宣称会产生全屏幕背景图片的教程之后，我发现了一篇很好的文章，介绍了如何通过四种不同的技术来实现这一目标 - 而且你可以轻松地实现这一目标。 10分钟。

以下是文章的链接：http://css-tricks.com/perfect-full-page-background-image/

仅供参考，以下是我制作的滑块的链接：http://hieroishere.com/fullscreenslider/

享受

Answer 4

看看这个：

http://css-tricks.com/how-to-resizeable-background-image/

Answer 5

最简单的方法是 - 不需要CSS3或HTML5：

img {
 max-width: 100%;
}

修改：

刚才意识到你的问题与背景图片有关 - 所以你可以使用它：

background-size: 100% 100%;

在网页上缩放的背景图像

5 个答案: