Explain image sizes in percentage

Can anyone try?

[vincevincevince]

So far as I understand, display:block;width:500%; should change an element to fill 50% of the width of its container and retain the height which it gains from height:auto, and yet I still have problems when I apply it to an image.

<img src="..." style="display:block;width:50%">

The above does not stretch the image to 50% of the width of the container but instead makes the image 50% of its natural size.

What am I missing, and how can I get an image to behave properly as a block element?

[Marshall]

I believe you have to lose the block element:

<img src="..." style="width:50%">

Using this style, it works fine for me, resizing to 50% of its parent.

The other option is put it in a <div style="width:50%">> and not specify the size of the image.

Marshall

[vincevincevince]

I think I am getting closer - it seems to be a quirks mode thing which makes width: values relative to the image size not the container size. Quite why it would do so is beyond me!

[yannis]

You need an image container!

.imageContainer{width:50%}
.imageContainer img{display:block;width:100%}

The image will fill the container and re-size as the container div is resized by the browser.

Works well in all browsers.