在Flexbox中居中和缩放图像

Question

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

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

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

3. 如果图像的原始宽度大于容器的宽度,则图像将缩放到容器的宽度.

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>

这里是一个Codepen使用填充工具.似乎在IE10中正常工作但在IE11中损坏.

Answer 1

CSS正在迎头赶上.它还没有最大的支持,但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甚至不需要这种方法.

这是此方法的另一个代码.

.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>

这里的支持要好得多,你可以玩更多的东西.再一次,这是来自css-tricks 的年历条目