使图像占据弹性项目的全部高度答案

【问题标题】：Make image take full height of flex item使图像占据弹性项目的全部高度
【发布时间】：2016-06-03 22:30:29
【问题描述】：

我有一个 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;
    ....

Fiddle

我遇到的问题是我需要图像是空间其余部分的高度。

我该怎么做？在我的小提琴中，如果你的屏幕很小，它会被切断，如果你的屏幕很大，它不会填满空间。高度：100% 无效，太大了。

请仅提供弹性解决方案，不要使用表格技巧 - 谢谢！

【问题讨论】：

标签： html css flexbox

【解决方案1】：

使用height: 100% 将图像容器 (.image) 设为弹性容器。

然后您可以微调图像的纵横比并与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>

Revised Fiddle

请注意，IE 不支持object-fit 属性。有关更多详细信息和解决方法，请参阅：https://stackoverflow.com/a/37127590/3597276

【讨论】：

【解决方案2】：

也许不完全是你想要的，但如果你把图片移动到一个 div 中并用它作为背景，你就能得到想要的效果。

Fiddle

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

【讨论】：