html - 在 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 正在迎头 catch 。它没有最大的 support然而，object-fit: contain 完全符合您的要求(EDIT 11/17:Edge 现在有部分支持，使 IE11 成为唯一不支持的浏览器)。只需将它放在 img 的 css 规则中，并将 max-width: 100% 和 max-height: 100% 更改为 width: 100%和 高度: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这里好多了，你可以玩的东西更多。再一次，这是一个 almanac entry来自 css 技巧