Is it possible to scale an image proportionally both on width and height based on a fixed container?

Question

Suppose we have an image that is 400x200 and another that is 200x400 and I want them to fit in a 200x200 box so the first should be scaled to 200x100 and the second to 100x200

We won't know the dimensions of the images in advance.

[edit] Plenty of good answers, thank you all!

Answer 1

One way is to use object-fit :

img {
  object-fit: contain;
  width: 200px;
  height: 200px;
}

JSFiddle Demo: https://jsfiddle.net/t75cxqt0/2/

Answer 2

Set both of these:

max-width: 200px;
max-height: 200px;

That will keep allow the images to resize automatically to a maximum of 200px on either side.

Answer 3

 img { max-width: 200px; max-height: 200px; /* just for demo purposes*/ margin: 1em; } 

 <img src="https://dummyimage.com/400x200/000/fff" /> <img src="https://dummyimage.com/200x400/000/fff" /> 

Answer 4

As pointed out elsewere, you could use max-height and max-width , which is good. But I'd like to take it a step further, and make it so that it doesn't matter what the container size is. Use a percentage value instead of 200px :

img {
  max-width: 100%;
  max-height: 100%;
}

Here is an example:

 .container { border: 5px solid blue; width: 200px; height: 200px; } img { max-width: 100%; max-height: 100%; } 

 <div class="container"> <img src="http://www.piprd.com/images/400X200.gif"> </div> <div class="container"> <img src="https://fakeimg.pl/200x400/"> </div> 

To prove this works, I have written some code (unnecessary for your actual code). You just need to enter the desired width + height for the container, and you can see the effect!

 function size() { var width = prompt("Please enter width for container", "200px"); var height = prompt("Please enter height for container", "200px"); if (width != null) { $('.container').css('width', width); } if (height != null) { $('.container').css('height', height); } } 

 .container { border: 5px solid blue; width: 200px; height: 200px; } img { max-width: 100%; max-height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <button style="float: right;" onclick="size()">Choose size values</button> <div class="container"> <img src="http://www.piprd.com/images/400X200.gif"> </div> <div class="container"> <img src="https://fakeimg.pl/200x400/"> </div>