Question

我想让图像在容器内水平和垂直居中。如果他们的宽度或高度大于他们的容器＆＃39;宽度或高度，然后让它们在保持比例的同时自动收缩。

我在容器上使用以下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;

here are three examples on jsFiddle：

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

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

Answer 1

问题是align-items的初始值为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>

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

1 个答案: