带有动态文本的 div 旁边的图像未占用容器的全高

Question

我目前在尝试将全高图像与包含未修复文本的 div 旁边匹配时遇到问题。

我尝试将 max-width、max-height 设置为 100%，但没有成功，还设置了背景图片，但仍然找不到解决方案。

这是我的标记：

<div class="col-xs-6 containerDivs">
    <div class="col-xs-8">
        <h2>LOREM IPSUM</h2>    
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do          
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
       veniam, quis nostrud exercitation ullamco laboris nisi u</p>
        <a href="#"><i class="moreIcon white spinLeft"></i></a>
    </div>
    <div class="col-xs-4">
        <img src="img/image-1.jpg">
    </div>
</div>

这是我的 CSS：

  .containerDivs{           
        > div:first-child{
            background-color:grey;              
            padding: 20px;
            h2{
                font-family: 'Lounge-Bold', Helvetica, sans-serif;
                font-size: 30px;                                                    
                letter-spacing: 6px;                    
                margin-bottom: 30px;
            }
            h2,p{
                color: white;
                text-transform: uppercase;
            }
            p{
                line-height: 1.8;
                font-family: 'Lounge', Helvetica, sans-serif;
                font-size: 16px;                        
            }
        }
        > div:last-child{           

        }

    }

这是它现在在我的浏览器中的样子：

所以我缺少的是图像占据列的整个高度，如果图像的一部分被裁剪，只要它占据整个高度就可以了。

提前致谢！

Answer 1

您可以使用Flexbox 使两个 div 处于相同高度。

/* Add it to the parent */
.containerDivs{
   display: flex;
} 

关于 img，如果你想让它占据全高，我建议你在 div 上使用 background-image：

.containerDivs>div:last-child{           
  background-image: url("path_to_your_image");
  background-size:cover;
}

这是一个有效的 JsFiddle：DEMO