我有一个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>
发布于 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;
}
https://stackoverflow.com/questions/30330845
复制相似问题