将图像夹在固定高度容器中的两段之间



我需要个人项目的帮助,如果有任何帮助,我将不胜感激。我有一个固定大小的容器,应该是这样的:两个文本之间的图像夹层

基本上,我希望文本1文字2是它们内容的高度,图像占据其余高度。我尝试(以及其他许多事情(将父容器设置为flexbox,并为图像提供0的flex基础和1的flex增长,但这会导致图像非常薄。所有其他尝试都导致图像溢出容器,文本2也被推出。

你知道如何实现我想要做的事情吗?

这个技巧是通过应用于container:来实现的

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

然后施加CCD_ 2至CCD_。

演示

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

最新更新