Banner height & width problem

[aheath1]

Hi there,

I’m setting up a fading head banner on no.purition.com and having some trouble getting it to re-size smoothly as the browser size is changed. If you check out the static banner on http://www.purition.co.uk and re-size the browser, you’ll see that the content below moves up/down smoothly based on the image size.

I’m basically trying to get the same with this fading banner image. With the main banner wrapper I’m forced to set the height by px, when I set as auto or 100% it disappears altogether:

#image_fader_wrapper{
height: 311px;
}

But by setting this fixed height, I’m left with empty space when the browser is at certain sizes (because the image is set to width: 100% of the page)

I’m stumped!

[Beverleyh]

Try setting padding-bottom as % instead. That way, height is created by the padding, which is relative to width, so it will resize fluidly.

There’s a round-up here that you might find useful http://fofwebdesign.co.uk/template/_testing/scale-img/scale-img.htm

And a blog post with explanations http://www.dynamicdrive.com/forums/entry.php?293-3-Ways-to-Resize-Scale-Web-Images-in-Responsive-Design

[Author]

Posts