在Flexbox中居中和缩放图像

Question

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

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



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



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



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



我注意到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>

以下是使用Codepen的polyfill。似乎在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

方法1：使用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