我有一个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解决方案,没有表格技巧 - 谢谢!
答案 0 :(得分:4)
使图像容器(.image
)成为具有height: 100%
的弹性容器。
然后,您可以使用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;
}
&#13;
<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>
&#13;
请注意,IE不支持object-fit
属性。有关详细信息和解决方法,请参阅:https://stackoverflow.com/a/37127590/3597276
答案 1 :(得分:1)
可能不完全是您想要的,但如果您将图像移动到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;
}