0

我正在使用本教程中的说明构建视差站点：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

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

先谢谢了...

4

1 回答 1

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)。基本上，这就是正在发生的事情：

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

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

于 2013-01-22T04:22:20.573 回答