固定高度容器中两个段落之间的夹层图像

Question

我的个人项目需要一些帮助，我将不胜感激。我有一个固定大小的容器，看起来应该是这样的： Image sandwhiched between two texts

基本上，我希望 Text 1 和 Text 2 是它们内容的高度，Image 占去剩下的高度。我尝试（除其他外）将父容器设置为 flexbox 并为图像提供 0 的 flex-basis 和 1 的 flex-grow ，但这会导致图像非常薄。所有其他尝试都导致图像溢出容器并且 文本 2 也被推出。

知道如何实现我想做的事情吗？

Answer 1

这个技巧是通过应用到 container:

display:flex;
flex-direction: column;
flex-flow:column;

然后将 flex:1 应用到 img-container 以拉伸主容器的整个高度。

演示

.container{
  height: 1200px;
  display:flex;
  flex-direction: column;
  flex-flow:column;
}
.img-container{
  flex:1;
  overflow:hidden;
  position: relative;
}
.img-container img{
  height:100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at dolor pulvinar erat vehicula vulputate imperdiet quis massa. Morbi dignissim consequat erat rutrum fringilla. Aenean blandit, ante quis ultricies dapibus, enim massa gravida neque, non ultrices nulla sem ac nisi. Nunc sodales dapibus libero sagittis pulvinar. Vestibulum dignissim ex leo, vel hendrerit eros mollis eget. Fusce blandit tempus orci, in bibendum libero pellentesque at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis ultricies lorem. Duis vehicula, nisi et pellentesque sodales, turpis arcu lacinia dolor, sit amet iaculis eros nisi a ligula. Ut id consequat nisi. Suspendisse at arcu blandit, aliquet ex dictum, finibus justo. Maecenas ac sollicitudin urna, ut luctus mi. Duis laoreet risus vitae metus accumsan volutpat.</p>
  <div class="img-container">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at dolor pulvinar erat vehicula vulputate imperdiet quis massa. Morbi dignissim consequat erat rutrum fringilla. Aenean blandit, ante quis ultricies dapibus, enim massa gravida neque, non ultrices nulla sem ac nisi. Nunc sodales dapibus libero sagittis pulvinar. Vestibulum dignissim ex leo, vel hendrerit eros mollis eget. Fusce blandit tempus orci, in bibendum libero pellentesque at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis ultricies lorem. Duis vehicula, nisi et pellentesque sodales, turpis arcu lacinia dolor, sit amet iaculis eros nisi a ligula. Ut id consequat nisi. Suspendisse at arcu blandit, aliquet ex dictum, finibus justo. Maecenas ac sollicitudin urna, ut luctus mi. Duis laoreet risus vitae metus accumsan volutpat.</p>
</div>

固定高度容器中两个段落之间的夹层图像

Sandwich image between two paragraphs in fixed height container

html

css

layout

演示