Auto-sizing images in a HTML CSS block as browser window resizes

Question

I'm after some help please. I'm trying to allow a block of 3 images to scale / resize as the browser window is re-sized, whist staying aligned.

I created a JSFiddle to show the initial layout of how images will be placed here: http://jsfiddle.net/headshot_harry/3eEDH/2/

The code I have which contains the images is here:

<div style="width: 100%; margin: 0 auto -80px auto;">
    <div style="display: inline-block; border: 1px solid black; padding: 3px; text-align: center;">
        <div style="display: inline-block; margin: 0 4px 0 0; padding: 0; background-color: White; border: 1px solid black;
            width: 51%; vertical-align: top;">
            <img src="http://www.zen87038.zen.co.uk/image/glove/gs_golf_glove2.png" style="width: 100%;" />
        </div><div style="display: inline-block; margin: 0; margin: 0; width: 26%;">
            <div style="border: 1px solid black; margin-bottom: 3px;">
                <img src="http://www.zen87038.zen.co.uk/image/glove/gs_golf_glove4.png" style="width: 100%; background-color: White; margin-bottom: 4px;" />
            </div>
            <div style="border: 1px solid black;">
                <img src="http://www.zen87038.zen.co.uk/image/glove/gs_golf_glove4.png" style="width: 100%; background-color: White;" />
            </div>
        </div>
    </div>
</div>

Basically, it scales reasonably well, but I can't figure out how to get it to stay aligned. I think I've got way ahead of myself and got totally mixed up on the percentages.

As the JSFiddle above shows, I need to have one image on the left hand side of the block and 2 images sitting on top of each other occupying the right hand side of the block ideally with a small 3/4/5 pixel (whatever works) gap in-between images. Then when the browser is shrunk or enlarged I'd like the images to also shrink or enlarge.

Would anyone be able to help me with this please?

Answer 1

You will need to make sure your site is responsive. In order to make the changes to the img as the site re-sizes. You will need to make your img size into percents. Check out the example. http://designsbycamaron.net/equal-image-heightswidth/ Here is a direct link to my jsfiddle.

img {
   width: 80%;
   height: auto;
 }