flexbox可以水平和垂直居中图像而不拉伸它们吗？

Question

我想让图像在容器内水平和垂直居中.如果它们的宽度或高度大于容器的宽度或高度,那么在保持其比例的同时使它们自动收缩.

我在容器上使用以下CSS代码来尝试实现目标:

display: -ms-flexbox;
display: -webkit-flex;
display:         flex;
    -ms-flex-direction: column;
-webkit-flex-direction: column;
        flex-direction: column;
          -ms-flex-pack: center;
-webkit-justify-content: center;
        justify-content: center;

而且这里有上的jsfiddle三个例子:

• 第一个例子是宽度大于其高度的图像.它工作正常.
• 第二个例子是高度大于其宽度的图像.但在这个例子中,它的宽度延伸到容器的宽度,这不是我想要的.
• 第三个例子与第二个例子有同样的问题.

此外,我知道通过使用CSS位置和变换也可以实现目标.但是这种方法通常会在调整大小的图像和容器的边框之间产生1个像素的间隙.也就是说,调整大小的图像无法触及容器的边界,它应该在哪里.因此我不得不求助于CSS flexbox.

Answer 1

的问题是,的初始值align-itemsIS stretch和的初始值align-self是auto,这样的图像被拉伸.

所以你需要以下之一:

.flex-container {
    align-items: center;
}

.flex-item {
    align-self: center;
}

* {
  margin: 0;
  padding: 0;
}
div {
  display: flex; /* Magic begins */
  flex-direction: column;
  justify-content: center; /* Center in main axis */
  align-items: center; /* Center in cross axis */
  margin: 20px auto;
  width: 300px;
  height: 300px;
  border: 2px solid #000;
}
img {
  max-width: 100%;
  max-height: 100%;
}

<div>
  <img src="http://lorempixel.com/400/200/" alt="" />
</div>
<div>
  <img src="http://lorempixel.com/200/400/" alt="" />
</div>
<div>
  <img src="http://lorempixel.com/50/50/" alt="" />
</div>

但请注意,中间图像仍然有点拉长.那是因为如果图像比容器高,它们将垂直收缩而不是水平收缩(与行布局相反).

为防止这种情况,请使用object-fit(IE和Edge不支持):

img {
  object-fit: contain;
}

* {
  margin: 0;
  padding: 0;
}
div {
  display: flex; /* Magic begins */
  flex-direction: column;
  justify-content: center; /* Center in main axis */
  align-items: center; /* Center in cross axis */
  margin: 20px auto;
  width: 300px;
  height: 300px;
  border: 2px solid #000;
}
img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

<div>
  <img src="http://lorempixel.com/400/200/" alt="" />
</div>
<div>
  <img src="http://lorempixel.com/200/400/" alt="" />
</div>
<div>
  <img src="http://lorempixel.com/50/50/" alt="" />
</div>