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

使用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;
}

关键是使用对象拟合：包含 以保持纵横比，对齐项目：拉伸 以确保图像不会在左右两侧被切断（这可能是一个bug？）。

Answer 2

如果您可以从flex更改为block：

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

正如@janfoeh所指出的，使用object-fit:contain可以：

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;

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

Answer 3

将高度指定为百分比值时，即相对于父图元高度的百分比。对于<代码>

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

J桥

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%;
}

html prettyprint-override"><div class="container">
  <div class="box"></div>
  <div class="box">
    <img src="//dummyimage.com/300" />
  </div>
  <div class="box"></div>
</div>