Flexbox 图像缩放到高度并保持纵横比

Question

我有一个使用 CSS flexbox 缩放到可用高度的 DIV。在这个 DIV 中是一个图像，我想在两个维度上与 DIV 一起缩放。这意味着它应该在保持其纵横比的情况下进行缩放，并且小于相应 DIV 尺寸的尺寸应该居中。

我可以使图像跟随 DIV 的宽度，但不能跟随高度。因此，肖像图像会脱离 DIV 界限。

这是一个jsFiddle 来演示问题。

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box img {
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
}

<div class="container">
  <div class="box"></div>
  <div class="box" style="background: pink;">
    <img src="//dummyimage.com/300" />
  </div>
  <div class="box"></div>
</div>

Answer 1

基于@darrylyeo 的回答。

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;

  width: 100%;
  height: 100%;

  border-radius: 4px;
  background-color: hsl(0, 0%, 96%);
}

.box {
  border-radius: 4px;
  display: flex;
}

.box img {
  width: 100%;
  object-fit: contain;
  border-radius: 4px;
}

Answer 2

当您将高度指定为百分比值时，即相对于父元素高度的百分比。 <img> 标签也是如此。

在这个未知高度的 flexbox 布局中，您可以使用 position 技巧使图像同时适合 flex 项的宽度和高度，并使用 transform 技巧进行居中。

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.box:nth-child(2) {
  background: pink;
}
.box img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

<div class="container">
  <div class="box"></div>
  <div class="box">
    <img src="//dummyimage.com/300" />
  </div>
  <div class="box"></div>
</div>

你也可以使用background图片，这样会方便很多，关键是使用contain这个值。请参阅下面的简化演示。

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1 1 auto;
}
.box:nth-child(2) {
  background: pink url(//dummyimage.com/300) no-repeat center center / contain;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 3

删除图片标签并将其设置为.box div的背景background-size:cover;
jsfiddle 1

或者，如果您想避免裁剪：

删除图片标签并将其设置为.box div的背景background-size:contain;
jsfiddle 2

Answer 4

使用 flexbox！ (JSFiddle)

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
}

.box {
    flex: 1 1 auto;
    background: yellow;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.box img {
    width: 100%;
    object-fit: contain;
}

关键是用object-fit: contain;保持纵横比，align-items: stretch;保证图像左右不被截断（可能是bug？）。

Answer 5

如果你可以从 flex 改为 block：

https://jsfiddle.net/svArtist/ug6eoxfs/

正如@janfoeh 指出的那样，使用 object-fit: contains 使之成为可能：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;
    position:relative;
}

.container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}

.box {
    background: yellow;
    width: 100%;
    padding: 0 5%;
    box-sizing:border-box;
    max-width: 100%;
    height: 100%;
    max-height:100%;
    position:relative;
}

.box img {
    height:100%;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    margin: auto;
    position:absolute;
    top:0%;
    bottom:0%;
    left:0%;
    right:0%;
    display:block;
    object-fit: contain;
}

如果需要 Flex 布局，作为最后的手段，您可以考虑使用背景图像，这让整个事情变得非常简单：https://jsfiddle.net/svArtist/e1c2tLme/

    background: url(http://placehold.it/300) no-repeat center center;
    background-size: contain;

除此之外，我找不到不涉及脚本的方法。