Flexbox图像缩放到高度并保持纵横比
Flexbox图像缩放到高度并保持纵横比
提问于 2015-05-20 00:11:22
我有一个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>
回答 1
Stack Overflow用户
发布于 2017-07-11 23:58:26
基于@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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30330845
复制相关文章
相似问题