如何在使用带有Zurb Foundation的Supersized时保留背景幻灯片图像的纵横比

Question

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

这在我以前的网站上是可以的。它不会在我当前的网站上做。

因此，当窗口或设备变窄时，图像会受到挤压。

如果我删除Zurb CSS，那么Supersized将保持纵横比不变，因此我知道原因与Zurb Foundation所做的图像调整有关。那么我如何在Supersized中覆盖背景图像的Zurb CSS呢？

可在此处查看站点演示：http://mwildmandesign.com/IBG/index.html

这是一个稍微调整了大小并保持长宽比不变的网站，我需要它在我的网站上的外观：http://risd.edu

Answer 1

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

#supersized img{
  max-width: none;
}

Answer 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;
}

在以下位置工作：

1. Safari 3+
2. Chrome
3. Opera 10+ (支持Opera9.5的背景大小，但不包括关键字)
4. Firefox 3.6+ (Firefox 4支持非供应商前缀版本)

here is an demo from css-tricks