是否可以根据固定容器在宽度和高度上按比例缩放图像?

Sam*_*us_ 2 html css image-scaling

假设我们有一个400x200的图像和另一个200x400的图像,我希望它们适合200x200的盒子,所以第一个应该缩放到200x100,第二个应该缩放到100x200

我们不会提前知道图像的尺寸.

[编辑]很多好的答案,谢谢大家!

Mig*_*ota 6

一种方法是使用object-fit:

img {
  object-fit: contain;
  width: 200px;
  height: 200px;
}
Run Code Online (Sandbox Code Playgroud)

JSFiddle演示:https://jsfiddle.net/t75cxqt0/2/