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

Question

我目前正面临一个问题，因为我正在尝试使具有未固定文本的 div 旁边的全高图像适合。

我已经尝试将最大宽度和最大高度设置为 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