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并将width auto替换为width 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

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

1 个答案: