jquery - 具有视差、最大宽度技巧的流体图像无法按预期工作

Question

我正在使用本教程中的说明构建视差网站: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%} 。从理论上讲，只要宽度不超过其容器的 width 就应该可以工作...

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

我是不是漏掉了一个基本概念？

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

本质上，当您缩小页面时——蛇和视差背景元素也会按比例缩小……因此需要流畅的图像。

在此先感谢...

Answer 1

这比仅使用 max-width 更复杂。要让您的视差图像随视口(viewport)(浏览器窗口)调整大小，而不超出其自然大小，请尝试以下操作:

#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%。
• 您在容器 div 中有一个图像 #bg3-1，其流体宽度为 100% 并且 max -width 等于图像的自然宽度。此外，您有 margin: 0 auto 使图像居中(一旦图像达到其最大宽度，否则它将在容器 div 中左对齐)。

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