HTML automatic image resize using pixel and percent constraints

You should use the max-width property:

<div style="width:600px">
<img src="images/image.jpg" alt="image" style="max-width:100%;"/>    
</div>

This will constrain your image width to the parent div element, down scaling the image if necessary. It will not lose its aspect ratio or up scale an image. max-width is supported in all up to date browsers but not in IE6


Using the max-width property twice works correctly:

<div style="max-width: 400px" >
<img src="image.jpg" style="max-width:100%;" />
</div>

Tags:

Html

Css

Image