css - 仅使用 CSS 使图像在网格中居中，限制高度，保持纵横比

Question

我有一个图像网格，要在一行中显示。网格的高度不能超过浏览器的高度。每个图像可以是任意高度和任意宽度。

图像必须在其容器中垂直和水平居中。如果图像的高度或宽度大于其容器，则图像不应溢出其边界。

这可能吗？

有很多帖子问类似的问题。

Constrain img to div and maintain aspect ratio?

CSS: How can I set image size relative to parent height?

等等。然而，我看到没有人使用 flexbox。

<div class='grid-container'>
  <div class='grid'>
    <div class='col'>
      <div class='img-container'>
        <img src='http://via.placeholder.com/300x150'/>
      </div>
    </div>
    <div class='col'>
      <div class='img-container'>
        <img src='http://via.placeholder.com/200x400'/>
      </div>
    </div>
  </div>
</div>

https://codepen.io/stljeff1/pen/MEWoPN

这是一个代码笔，展示了我正在尝试做的事情

为什么 img {max-height: 100%; } 除了 img { height: 150px; 什么都不做}约束图像？

************编辑****************** 正如下面评论中所指出的，我可以使用 object-fit。该示例引用了 IE Edge 中的 Works，而不是 IE 11。

Answer 1

我不知道你是否尝试这样做:

    img {
      width: 100%;
      max-height: 100%;
      display: block;
    }

https://codepen.io/headmax/pen/wrvqRv