使图像占据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%的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

Answer 2

也许不完全是你想要的，但是如果你将图像移动到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;
}