使图像占据Flex项目的全高

Question

我有一个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解​​决方案只是请,没有表格技巧 - 谢谢!

Answer 1

使用 使图像容器 ( .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;
}

<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>

修订版小提琴

object-fit请注意， IE 不支持该属性。有关更多详细信息和解决方法，请参阅：/sf/answers/2598931331/