how to proportionally resize div with an image inside

Question

OK, so I have a full screen background image which uploads via flash

flash {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; }

It resizes perfectly, I also have a footer at the bottom as div and 5 images inside it. I aligned all images in one row but as a browser resizes images jump up instead of resizing proportionally. Would appreciate your advice. Here is the link to jsFiddle http://jsfiddle.net/eglemei/LqBzY/

Answer 1

Your images aren't resizing because you haven't told them to resize. Proportional resizing isn't default behavior. Images will only resize themselves in proportion to their containing element if they're giving a width or height value in percentages.

Once you've specified a percentage height or width , the images will be scaled according to the closest parent element with an explicitly set position attribute (which in your case is 'div#footer'. If you do set a percentage width , then as long as you don't specify a height elsewhere, the images will keep their aspect ratio.

Change the CSS for the images to something like this:

#sponsors img {
    margin-right: 3%; 
    width:16%;
}

You'll also need to remove the height="100px" from each img tag, otherwise the img will use that height.

I've updated your jsFiddle accordingly: http://jsfiddle.net/LqBzY/5/