我正在尝试 flex 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>
关于javascript - CSS flex 一个内容适合的图像,其标题同级的高度未知,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63540670/