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

问题

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!

回答1:

One way is to use object-fit:

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

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

回答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.

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

回答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>

来源：https://stackoverflow.com/questions/44766418/is-it-possible-to-scale-an-image-proportionally-both-on-width-and-height-based-o

标签

html

css

image-scaling