使用Supersized with Zurb Foundation时,如何保留背景幻灯片图像的宽高比

0 jquery fullscreen responsive-design supersized zurb-foundation

我正在使用两个流行的工具Zurb基础和一个站点的Supersized jquery插件.我以前曾经用过它们一次.但是,当我一起使用时,Zurb Foundation CSS会压缩图像宽高比,这会扭曲Supersized jquery插件中的图像.当浏览器窗口缩小时,它会执行此操作.

在我以前的网站上没问题.它不会在我当前的网站上.

所以当窗户或设备狭窄时,图像会被挤压.

如果我删除了Zurb CSS,那么Supersized会保持纵横比不变,所以我知道原因与Zurb Foundation的图像重新调整大小有关.那么我如何过度使用Zurb CSS来获取Supersized中的背景图像.

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

这是一个网站调整大小,保持宽高比完整我需要它在我的网站上查看:http://risd.edu

小智 5

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

#supersized img{
  max-width: none;
}
Run Code Online (Sandbox Code Playgroud)