0

我正在使用两个流行的工具，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

4

2 回答 2

5

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

#supersized img{
  max-width: none;
}
于 2013-05-27T17:02:50.467 回答
0

调整大小时，我在所有浏览器（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. 野生动物园 3+
  2. 铬合金
  3. Opera 10+（Opera 9.5 支持 background-size 但不支持关键字）
  4. Firefox 3.6+（Firefox 4 支持非厂商前缀版本）

这是来自 css-tricks 的演示

于 2013-04-10T14:51:41.720 回答