CODEWITHSUNDEEP
jquerycssresponsive-designmedia-queries
Edd Turtle
Edd Turtle

Reputation: 1531

Height of <ul> with absolute positioning (in a Responsive Design)

I have a slideshow, of sorts, which is triggered using jQuery and cycles through images in a ul. The images are styled with CSS to be absolutely positioned as to overlap and they casually fadeIn and fadeOut.

The Problem

I gave each image a max-width of 100% as part of my responsive design and the ul a static height, but of course the images change height depending on screen-size.

Solution

It is possible to check with jQuery the size of the images once they've loaded and size the ul accordingly - but this leads to a nasty flicker as the images are loaded.

Is there a CSS solution?

Much is explained through this jsFiddle: http://jsfiddle.net/eddturtle/vvsDh/1/

Upvotes: 1

Views: 484

Answers (1)

Throttlehead
Throttlehead

Reputation: 1945

You may be able to come up with something by instead using background images as CSS3 has a 'background-size' property that you can set to 'cover'. Here's the doc.

What I might do is hide your list of images and instead create an image holder for each transition and set it's CSS background property. Have this new holder fade in, and use the callback for the fadeIn function to remove the previous holder from the DOM. I could maybe edit the fiddle for you and get this solution running if you need me to.

EDIT***

Here ya go dude. This should work exactly as you need it to. As it is right now the background image is set to cover, which will make sure the image fills the entire area. If you want to make sure the entire image is displayed and ratio constrained, use contain. All you need to do is adjust the parent #slideshow height to what you need it to be.

http://jsfiddle.net/vvsDh/5/

Upvotes: 1

Related Questions