使用 Supersized 和 Zurb Foundation 时如何保留背景幻灯片图像的纵横比答案

【问题标题】：How do I preserve the aspect ratio of background slideshow images when using Supersized with Zurb Foundation使用 Supersized 和 Zurb Foundation 时如何保留背景幻灯片图像的纵横比
【发布时间】：2013-03-13 18:55:29
【问题描述】：

我正在使用两个流行的工具，即 Zurb Foundation 和 Supersized jquery 插件。我以前一起使用过一次。但是，当我将它们一起使用时，Zurb Foundation CSS 会压缩图像纵横比，从而扭曲 Supersized jquery 插件中的图像。当浏览器窗口变窄时，它会执行此操作。

这在我以前的网站上没问题。它不会在我当前的站点中执行。

因此，当窗口或设备较窄时，图像会被挤压。

如果我删除了 Zurb CSS，那么 Supersized 会保持纵横比不变，所以我知道原因与 Zurb Foundation 所做的图像调整大小有关。那么，我该如何为 Supersized 中的背景图片覆盖 Zurb CSS。

站点演示可以在这里看到：http://mwildmandesign.com/IBG/index.html

这是一个稍微调整大小并保持纵横比不变的网站，就像我在我的网站上所需要的那样：http://risd.edu

【问题讨论】：

标签： jquery responsive-design fullscreen zurb-foundation supersized

【解决方案1】：

原因是 Foundation 为所有图像设置了 max-width 属性。为了解决这个问题，您只需要通过将其添加到样式表来删除图像的 max-width 属性

#supersized img{
  max-width: none;
}

【讨论】：

完美解决了我在使用foundation和supersizedjs时遇到的问题
我刚刚浪费了大约 2 个小时，因为 Bootstrap 设置 img {max-width: 100%;} 默认情况下，当我不想挤压我的超大背景图像时，它们会水平挤压它们。非常感谢你帮我解决这个问题！

【解决方案2】：

调整大小时，我在所有浏览器（IE8+、FF、Safari、Chrome）上显示的纵横比都相同，您使用什么浏览器查看？

CSS 替代方案

一个简单的解决全背景尺寸图像的方法，同时保留你的纵横比，实际上可以通过 CSS3 来实现（旧浏览器的优雅降级）。它会在保持图像可见的同时缩小图像的大小。

body {
  background: url(img.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

工作于：

Safari 3+
铬
Opera 10+（Opera 9.5 支持 background-size 但不支持关键字）
Firefox 3.6+（Firefox 4 支持非供应商前缀版本）

here is an demo from css-tricks

【讨论】：