CODEWITHSUNDEEP
jqueryresponsive-designfullscreenzurb-foundationsupersized
Muhatman Wildman
Muhatman Wildman

Reputation: 1

How do I preserve the aspect ratio of background slideshow images when using Supersized with Zurb Foundation

I am using two popular tools the Zurb foundation and the Supersized jquery plugin for a site. I have used them together once before. However, when I use them together Zurb Foundation CSS squeezes the image aspect ratio which distorts the images in the Supersized jquery plugin. It does this when the browser window is made narrow.

That was ok in my previous site. It will not do in my current site.

So what is happening is the images are getting squeezed when the window or device is narrow.

If I remove the Zurb CSS then Supersized keeps the aspect ratio intact so I know that the cause has something to do with the image re-sizing that Zurb Foundation does. So how do I over ride the Zurb CSS for just the background images in Supersized.

Site demo can be seen here: http://mwildmandesign.com/IBG/index.html

here is a site the resizes a bit and keeps the aspect ratio intact the way I need it to look on my site: http://risd.edu

Upvotes: 0

Views: 1961

Answers (2)

BiscuitKnees
BiscuitKnees

Reputation: 151

The reason for this is a max-width property being set by Foundation for all images. In order to fix this, you just need to remove the max-width property for images by adding this to your stylesheet 

#supersized img{
  max-width: none;
}

Upvotes: 5

Dylan
Dylan

Reputation: 811

The aspect ratio is showing the same for me across all browsers (IE8+, FF, Safari, Chrome) when resizing, what browser are you using to view this?


CSS Alternative

A simple solution to the full background sized image, while preserving your aspect ratio, can actually be achieved through CSS3 (with a graceful downgrade for older browsers). It will resize the image down while keeping image visible. 

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

Works in:

  1. Safari 3+
  2. Chrome
  3. Opera 10+ (Opera 9.5 supported background-size but not the keywords)
  4. Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

here is an demo from css-tricks

Upvotes: 0

Related Questions