Question

I have wrapping div with fixed width and height (400x300px). Inside an with its own width/height (landscape 800x600px) or (portrait 600x800px) sometimes images can have different size. How do I scale with CSS so both can be scaled down proportionally to fit within the width or height – whichever comes first?

Here’s the code:

<div style="width:400px; height:300px;">
    <img style="width:auto; height:auto;" src="image url>" />
</div>

Thanks

Answer 1

Use max-width and max-height:

img {
    max-width: 400px; 
    max-height: 300px;
}