My apologies I didn't' really know how to accurately title this so hopefully my description makes sense.
I'm currently playing around with implementing Orbit and I've run into a bit of an issue in different browser window sizes. I've set up a quick demo page here for reference: http://orangeola.com/foundation/
In this example there are 3 slides. The first slide image is 800 by 400, the second in 1600 by 1200 and the last is 640 by 330. The slider is wrapped in a div called orbit-wrapper with the height and width set to inherit. The actual slider div is called orbitDemo and has a max-height set to 330px.
In the normal view everything looks pretty normal (there's a bit of black space at the bottom of images 1 and 3), but when you start shrinking the browser some issues occur. When you get it to about iPad size and the slider actually becomes about 760 pixels an image that isn't wide enough already won't expand out to fit the new space.
Also, if you take it as narrow as it can go (iPhone-ish size) the slider then takes on some sort of adjusted height of the biggest image, leaving a lot of empty space at the bottom of the other slides with the shorter images.
Obviously the slider works best when all the images are the same size and are large enough to accommodate all possible slider sizes, but this little quirk has me stumped. This is going into a WordPress theme and it would be nice if users didn't have to always make sure their images are exactly the same size.
So, is there something I'm missing in terms of the styling that is causing these couple of quirks? I tried adding some different img properties to the CSS (width: 100%) but none of them seemed to work. Any help or ideas would be greatly appreciated. Thank you.
My apologies I didn't' really know how to accurately title this so hopefully my description makes sense.
I'm currently playing around with implementing Orbit and I've run into a bit of an issue in different browser window sizes. I've set up a quick demo page here for reference: http://orangeola.com/foundation/
In this example there are 3 slides. The first slide image is 800 by 400, the second in 1600 by 1200 and the last is 640 by 330. The slider is wrapped in a div called orbit-wrapper with the height and width set to inherit. The actual slider div is called orbitDemo and has a max-height set to 330px.
In the normal view everything looks pretty normal (there's a bit of black space at the bottom of images 1 and 3), but when you start shrinking the browser some issues occur. When you get it to about iPad size and the slider actually becomes about 760 pixels an image that isn't wide enough already won't expand out to fit the new space.
Also, if you take it as narrow as it can go (iPhone-ish size) the slider then takes on some sort of adjusted height of the biggest image, leaving a lot of empty space at the bottom of the other slides with the shorter images.
Obviously the slider works best when all the images are the same size and are large enough to accommodate all possible slider sizes, but this little quirk has me stumped. This is going into a WordPress theme and it would be nice if users didn't have to always make sure their images are exactly the same size.
So, is there something I'm missing in terms of the styling that is causing these couple of quirks? I tried adding some different img properties to the CSS (width: 100%) but none of them seemed to work. Any help or ideas would be greatly appreciated. Thank you.