在 Flexbox 中居中和缩放图像

Question

如果容器内的 am <img>（尺寸未知）设置为display:flexbox，是否可以满足以下条件：

1. 如果图像的原生宽度小于容器的宽度，则它在容器内水平居中。

1. 如果图像的原生高度小于容器的高度，则它与容器垂直居中。

1. 如果图像的原生宽度大于容器的宽度，则图像将缩放到容器的宽度。

4. 如果图像的原生高度大于容器的高度，则图像将缩放到容器的高度。

我注意到 Chrome 和 Firefox 处理 flexbox 子图像的方式存在很大差异。 Chrome 到达一半，但垂直挤压图像。 Firefox 到了一半，但水平挤压图像：Codepen

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.Container {
  height: 100%;
  width: 100%;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

<div class="Container">
    <img src="http://d13rap2ac6f4c9.cloudfront.net/image_assets/quarry_medium.jpg?1410945487">
</div>

这是我能得到的最接近的Codepen，它在 4 上失败了。：

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.Container {
  height: 100%;
  width: 100%;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ImageWrapper {
  max-height: 100%;
  max-width: 100%;
}

img{
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  height: auto;
}

<div class="Container">
  <div class="ImageWrapper">
    <img src="http://d13rap2ac6f4c9.cloudfront.net/image_assets/quarry_medium.jpg?1410945487">
  </div>
</div>

我知道这种行为以前如果没有 JavaScript 是不可能的，但我很惊讶使用 flexbox 似乎无法实现。

注意：我不是在寻找 JavaScript 解决方案或在现代浏览器中无法运行的解决方案。

针对 David Mann 的回答，这里是前面使用 object-fit Codepen 的示例。

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.Container {
  height: 100%;
  width: 100%;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

<div class="Container">
    <img src="http://d13rap2ac6f4c9.cloudfront.net/image_assets/quarry_medium.jpg?1410945487">
</div>

这是使用polyfill 的Codepen。在 IE10 中似乎可以正常工作，但在 IE11 中出现故障。

Answer 1

CSS 正在迎头赶上。它还没有最大的support，但object-fit: contain 完全符合您的要求（编辑 11/17：Edge 现在有部分支持，使 IE11 成为唯一不支持的浏览器）。只需将其放入 img 的 css 规则中，然后将 max-width: 100% 和 max-height: 100% 更改为 width: 100% 和 height: 100%。这是codepen。

.Container {
  height: 100vh;
  width: 100vw;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

body {
  margin: 0;
}

<div class="Container">
  <img src="https://unsplash.it/2000/1500">
</div>

如果 IE 缺乏对 object-fit 的支持是一个交易破坏者，那么有一个 javascript polyfill 支持它。以下是来自css-tricks 的更多信息。

background-image 也可以达到同样的效果，但感觉有点作弊。

只需将此添加到.Container：

background-image: url(http://d13rap2ac6f4c9.cloudfront.net/image_assets/quarry_medium.jpg?1410945487);
background-size: contain;
background-repeat:no-repeat;
background-position: center;

然后完全删除img标签。效果是一样的，但.Container 中没有实际元素。需要注意的是，使用这种方法display: flex 甚至不需要。

这是此方法的另一个 codepen。

.Container {
  height: 100vh;
  width: 100vw;
  background: red;
  background-image: url(https://unsplash.it/2000/1500);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

body {
  margin: 0;
}

<div class="Container">
</div>

这里的support 好多了，还有更多可以玩的东西。再一次，这是来自 css-tricks 的 almanac entry

Answer 2

方法一：使用 CSS 表格单元格，请看以下演示。

div {
    border: 1px solid red;
    width: 100px;
    height: 100px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

<div><img src="//dummyimage.com/75x50" /></div>
<div><img src="//dummyimage.com/50x75" /></div>
<div><img src="//dummyimage.com/300x200" /></div>
<div><img src="//dummyimage.com/200x300" /></div>
<div><img src="//dummyimage.com/200x200" /></div>

方法 2： 使用内联块，请参阅下面的注释。

div {
    border: 1px solid red;
    width: 100px;
    height: 100px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
}
div:before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

<div><img src="//dummyimage.com/75x50" /></div>
<div><img src="//dummyimage.com/50x75" /></div>
<div><img src="//dummyimage.com/300x200" /></div>
<div><img src="//dummyimage.com/200x300" /></div>
<div><img src="//dummyimage.com/200x200" /></div>

补充说明：在父容器内有空的时候设置font-size:0;，如果里面有文字内容，再在容器内重置为font-size:16px;左右。关注此以获取更多信息 - https://stackoverflow.com/a/5078297/483779