我正在尝试在中弯曲img和.title元素flex-column。调整页面大小时，图像应增加/缩小，同时保持其纵横比，并且标题文本在屏幕底部应保持相同的高度。但是，当我减小屏幕高度时，标题文本将被推离屏幕。
同样，.title元素的高度可能不会始终是一条直线，在渲染之前不会知道。
代码：https：//jsfiddle.net/qk4wbfpe/
body {
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.container > img {
flex-grow: 1;
flex-shrink: 1;
background-color: blue;
width: 100%;
height: 100%;
object-fit: contain;
}
.container .title {
padding: 10px;
color: white;
text-align: center;
background-color: gray;
}<div class="container">
<img src="https://cdn.mos.cms.futurecdn.net/paWPwF85Vkcs8YUuyvA3YM-650-80.jpg.webp">
<div class="title">
Planet Earth
</div>
</div>如果添加min-height:0到.container>img它会得到预期的结果。
body {
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.container>img {
flex-grow: 1;
flex-shrink: 1;
background-color: blue;
width: 100%;
min-height:0;
object-fit: contain;
}
.container .title {
padding: 10px;
color: white;
text-align: center;
background-color: gray;
}<div class="container">
<img src="https://cdn.mos.cms.futurecdn.net/paWPwF85Vkcs8YUuyvA3YM-650-80.jpg.webp">
<div class="title">
Planet Earth
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句