[英]Make image take full height of flex item
我有一個100vh的容器(減去固定的導航高度)。
<section class="container">
在這個容器里面我有一些文字:
<div class="text">
<p>title</p>
</div>
由於內容是動態的,因此可以是任何長度。
在本文下面我有一個圖像:
<div class="image">
<img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg">
</div>
圖像需要填充100vh( - 導航高度)容器的其余部分。
我用:
.container{
display:flex;
flex-flow: column nowrap;
....
我遇到的問題是我需要將圖像作為剩余空間的高度。
我怎樣才能做到這一點? 在我的小提琴中,如果你的屏幕很小,它會被切斷,如果你的屏幕很大,它就不會填滿空間。 高度:100%無法工作,使其太大。
Flex解決方案只是請,沒有表格技巧 - 謝謝!
使圖像容器( .image
)成為height: 100%
的Flex容器。
然后,您可以微調圖像的縱橫比並與object-fit
/ object-position
對齊。
nav { position:fixed; background:grey; width:100%; height: 100px; } main { padding-top: 100px; } .container { display:flex; flex-flow: column nowrap; height: calc(100vh - 100px); background: green; border: 3px solid brown; } .text { background: yellow; } /* ***** NEW ***** */ .image { display: flex; justify-content: center; height: 100%; } img { width: 100%; object-fit: contain; }
<nav>Nav</nav> <main> <section class="container"> <div class="text"><p>title</p></div> <div class="image"> <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg"> </div> </section> <section class="container"> <div class="text"><p>hello</p></div> <div class="image"> <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg"> </div> </section> </main>
請注意,IE不支持object-fit
屬性。 有關更多詳細信息和解決方法,請參閱: https : //stackoverflow.com/a/37127590/3597276
也許不完全是你想要的,但是如果你將圖像移動到div並將其用作背景,你就可以獲得所需的效果。
HTML:導航
標題
<section class="container">
<div class="text">
<p>hello</p>
</div>
<div class="imageWrap">
<div class="image"></div>
</div>
</section>
</main>
CSS:
nav {
background: grey;
width: 100%;
height: 100px;
position: fixed;
}
main{
padding-top: 100px;
}
.container{
display: flex;
flex-flow: column nowrap;
height: calc(100vh - 100px);
background: green;
border: 3px solid brown;
}
.imageWrap {
flex: 1;
display: flex;
}
.image {
flex: 1;
background-size: contain;
background-repeat: no-repeat;
background-image: url(https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg)
}
.text{
background: yellow;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.