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

Question

我需要一个可以保存其纵横比的图像，它将是图像本身的最大宽度或高度，但不再是窗口高度/宽度。

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

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

现在的问题是小图像会拉伸。

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

标签： htmlcss

Answer 1

除非您必须支持旧浏览器，否则请使用增加或减少图像大小的object-fit值contain来填充框，同时保持其纵横比。

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

我可以用吗