Question

我正在使用本教程中的说明构建一个Parallax站点：http://f6design.com/journal/2011/08/06/build-a-parallax-scrolling-website-interface-with-jquery-and-css/

本教程的演示版本位于：http://f6design.com/projects/parallax-scrolling/

我认为不需要包含我自己的代码，因为我认为我只是错过了一个大概念“流畅的图像”......根据我的理解，图像可以是只需在页面上的所有图像中添加“max-width:100%”即可制作液体。所以img {max-width:100%}。理论上，只要宽度不超过其容器的宽度，理论上就应该有效...

回到以下示例：http://f6design.com/projects/parallax-scrolling/ ...为什么在图像中添加“max-width:100%”不会产生流畅的图像？

我在这里错过了一个基本概念吗？

您可以在此处查看我正在构建的示例网站：http://alvarenga.co/liquid/index.html

基本上，当你缩小页面时 - 蛇，以及parallaxing背景元素也会按比例缩小......因此需要流畅的图像。

先谢谢...

Answer 1

这比使用max-width更复杂。要使用视口（浏览器窗口）调整视差图像的大小，而不超出其自然大小，请尝试以下操作：

#parallax-bg3 {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
}
#bg3-1 {
    margin: 0 auto;
    max-width: 1920px;
    position: relative;
    top: -111px;
    width: 100%;
}

上面的CSS专门针对您的示例代码（HTML）。基本上，这就是发生的事情：

您有一个容器div #parallex-bg3，其流体宽度为100%。
您在容器#bg3-1中有一个图像div，其流畅宽度为100%，max-width等于图片的自然宽度。此外，您有margin: 0 auto使图像居中（一旦图像达到其最大宽度，否则它将在容器div中左对齐）。

当视口调整大小时，div调整大小以100％填充窗口，然后图像也将调整大小以填充div 100％。 div和图像永远不会超过1920px，因此您的图像不会变得太大。实际上，您不需要在图片上设置max-width，只需要设置容器div。我把它添加好了。但是如果容器div永远不会超过1920px，那么图像也不会（因为它的宽度是100％）。

具有视差，最大宽度的流体图像技巧不能按预期工作

1 个答案: