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

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

这是没有 max-height:100vh 的解决方案

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