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

我正在使用本教程中的说明构建视差站点：

本教程的演示版本如下：

我不认为有必要包含我自己的代码，因为我认为我只是缺少了一个大概念“流体图像””。据我所知，只需在页面上的所有图像中添加一个“

最大宽度：100%

”即可使图像变为流体。所以

img{max width:100%}

。现在，只要宽度不超过其容器的宽度，理论上这应该是可行的

那么回到以下示例：…为什么在图像中添加“

最大宽度：100%

”不会生成流体图像

我是否缺少一个基本概念

您可以在这里看到我正在构建的示例站点：

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

---

感谢高级…

这比仅使用

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%

• 容器

  div

  内有一个图像

  #bg3-1

  ，其流体宽度为

  100%

  ，最大宽度等于图像的自然宽度。此外，您还可以使用

  margin:0 auto

  将图像居中（一旦图像达到其最大宽度，它将在容器div中左对齐）

---

当视口调整大小时，div将调整大小以100%填充窗口，然后图像也将调整大小以100%填充div。div和image永远不会超过

1920px

，因此图像不会变得太大。实际上，您不需要在图像上设置

max width

，只需设置容器

div

。我把它加了进去。但是如果容器div永远不会大于1920px，那么图像也不会大于1920px（因为其宽度为100%）。

我不太理解您的问题。你想完成什么？我从未听说过“液体图像”。是否希望图像随着流体父容器大小的变化而调整大小？另外，你应该发布一些代码来帮助我们理解什么是和/或不是预期的工作。液体图像显示在这里：我猜正确的术语是“流体”…因此我对此表示歉意，我一定要编辑文章标题以反映这一点。。。这是我的示例页面：……基本上，我想在缩小浏览器窗口时做到这一点——蛇的图像（和视差背景图像）按比例缩小……当窗口大小改变时，afaik图像本身永远不会自动（流畅地）改变大小。流体就是布局，也就是说，当窗口调整大小时，物体可以在彼此下方移动。这通常是有道理的，但为什么这个例子：以这种方式运行？哇，非常感谢！这对我来说意义重大！我想我被整个概念搞糊涂了。因此，图像实际上是基于父div类宽度的流体，而不是实际的视口…我更新了我的答案。如果视口的宽度超过1920像素，这些更改将使图像居中。此外，div上不需要

max width

。