将图像高度放大到最大高度的最佳方法是什么？

Question

我有一个显示图像的容器，该容器具有固定的 100% 宽度。我的要求是：

• 图片不改变纵横比
• 如果图片更宽，宽度为100%，高度应小于max-height。
• 如果图片更高，高度应该是max-height，宽度小于100%。

在我的示例中，前两个图像显示正确。但是，第三张图片是错误的，因为宽度没有达到 100% 或者高度没有达到最大高度。

我该如何解决这个问题？

.container {
  border: 1px solid black;
  height: 200px;
  width: 100%;
}

img {
  max-width: 100%;
  max-height: 200px;
  width: auto;
  display: block;
  margin: auto;
}

<div class="container">
  <img src="https://i.stack.imgur.com/kZPXw.png" />
</div>

<div class="container">
  <img src="https://i.stack.imgur.com/IfTIL.png" />
</div>

<div class="container">
  <img src="https://www.gravatar.com/avatar/62345e20906dbccbf7e18f11ab4bd047?s=64&d=identicon&r=PG&f=1" />
</div>

你也可以在这里玩：https://jsfiddle.net/d425c1bh/2/

Answer 1

试试这个，添加 object-fit 并将宽度 auto 替换为宽度 100%

.container {
  border: 1px solid black;
  height: 200px;
  width: 100%;
}

img {
  max-height: 200px;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: auto;
}

看到它在工作here