Question

How can I add an image to an HTML page using the following constraints:

• No upscaling allowed ( if the picture width is 400 pixels I don’t want to resize it to 600).
• The image should be downscaled if the containing element is smaller than the image.
• Keep aspect ratio.

For instance I have an image (400×300). If the containing element is 600 pixels wide I’d like to show the image at 400×300. If the containing element is 200 pixels wide ( for instance it’s a mobile browser ) I’d like to show the image at 200×150.

I’m looking for a pure CSS solution (if it’s possible) without hard wiring the image size.

Answer 1

Using the max-width property twice works correctly:

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