Question

I am trying to have images resize proportionally to their containing elements, the only problem is that I am struggling to get the height of each image container to resize proportionally to it’s changing width on window resize, each image container’s width is set to 25% of the main container element’s width.

What I need to happen now is for each image container to resize proportionally when the window resizes, and to have each image inside it’s respective container grow with it, but keep it’s aspect ratio.

Here is what I have thus far, http://jsfiddle.net/pPWVd/ .

Answer 1

I have modified your fiddle ( http://jsfiddle.net/pPWVd/5/ ) to reflect the idea of what you describe. The key to maintaining an aspect ratio is to only set one dimension (width or height). Also, I set the display of item to block since it is getting a width and being floated.

Depending on your situation, you really don’t need the extra div wrappers to achieve the effect, see http://jsfiddle.net/pPWVd/7/. Though if you are putting other stuff in the item then you will want to keep it as you had it.