具有最大宽度或高度的图像本身具有保存的宽高比的图像，受窗口大小的限制

Question

我需要一个能够保存其宽高比的图像，它将是图像本身的最大宽度或高度，但不会超过窗口的高度/宽度。

这是codepen示例：https://codepen.io/anon/pen/GeQqOv

这个例子是用户头像，用户可以加载任何尺寸，但我希望大头像拥有100％大小的图像，而不是在大屏幕上拉伸小图像。

现在问题是小图像会伸展。

img {
  width: 100%;
  height:auto;
  object-fit: contain;
   max-height: 100vh;
}

Answer 1

除非您必须支持旧版浏览器，否则请使用值为object-fit的contain，它会增加或减小图像的大小以填充框，同时保留其宽高比。

img {
  width: 100%;
  height:auto;
  object-fit: contain;
  max-height: 100vh;
}

can-i-use

Answer 2

这个解决方案只有最大高度：100vh

img {
  height:auto;
  width:auto;
  object-fit: contain;
  max-width:100%;
  max-height:100%;
  object-fit: contain; 
}