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

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

在这个未知高度的flexbox布局中,您可以使用position技巧使图像适合弹性项目的宽度和高度,并使用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 2

如果你可以从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;

除此之外,我找不到一种不涉及脚本的方法.

Answer 3

使用弹性盒！( 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;确保图像不会被左右截断（这可能是一个错误？）。