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!

I'm not sure a 200x100 and 100x200 would fit in a 200x200 box... — James Douglas, Jun 26 '17 at 18:39
@JamesDouglas yeah they won't fill the container what I want is to get them scaled proportionally so they fit and don't get distorted — Samus_, Jun 26 '17 at 18:51

score 7 · Accepted Answer · answered Jun 26 '17 at 18:43

7

One way is to use object-fit:

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

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

answered Jun 26 '17 at 18:43

Miguel Mota

20,135
5
45
64

1

Brilliant, I'd considered a similar fix using `background-size`, but that would involve moving the image `src` into the CSS, which is hardly ideal. Unfortunately IE is the weak link here (although Edge is due to support it in v16): http://www.caniuse.com/#search=object-fit – Conan Jun 26 '17 at 19:05

score 1 · Answer 2 · answered Jun 26 '17 at 18:40

1

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.

answered Jun 26 '17 at 18:40

Jeremy

521
2
9

score 1 · Answer 3 · answered Jun 26 '17 at 18:41

1

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" />

answered Jun 26 '17 at 18:41

Conan

2,659
17
24

James Douglas · Answer 4 · 2017-06-26T19:15:51.403

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>

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

4 Answers4

Linked