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

Question

我有一个DIV，使用CSS flexbox缩放到可用高度。在这个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

如果你可以从弹性变为阻止：

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

为@janfoeh指出，使用对象的配合：含有能够：

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 2

使用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;保证了图像的左侧和右侧（也许这是一个错误？）没有切断。

Answer 3

删除图像标签，并与background-size:cover;
jsfiddle 1

将其设置为.box div的背景，或者，如果你想避免重茬：

删除图像标签，并将其设置为背景在.box DIV与background-size:contain;
jsfiddle 2

Answer 4

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

在这个未知高度柔性箱布局中，您可以使用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 5

基于@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; 
}