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

【问题标题】：Using CSS ONLY to center images in a grid, constraining height, keeping aspect ratio仅使用 CSS 在网格中居中图像，限制高度，保持纵横比
【发布时间】：2018-02-21 10:59:49
【问题描述】：

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

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

这可能吗？

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

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; } 约束图像之外什么都不做？

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

【问题讨论】：

height:100% 需要具有有效高度的父级。继承要计算的有效高度值的级联从没有高度的 .grid 中丢失。 100% 什么？父容器设置为 200px 还是窗口？要继承 height + object-fit ，您可以使用 codepen.io/anon/pen/WZNEYQ 或 codepen.io/anon/pen/JrjyVv
是的，我确实遇到了 object-fit。那个跨浏览器兼容吗？我以为它在IE中坏了。但是，如果可能的话，我想避免使用 polyfill。
好的，您要使用 flex 还是其他任何显示方式？您指的最大高度是多少：200px 或窗口的？
最大高度是窗口，或者稍小一点的内边距
那么你可以只在img标签上使用max-height:100vh，让父母在不掌握高度的情况下做他们的常规工作。 codepen.io/gc-nomade/pen/ZXEXGX ;) 它适用于 IE11

标签： css flexbox

【解决方案1】：

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

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

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

【讨论】：