图片未占据 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

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

Image not taking full height of container next to div with dynamic text

html

css

image

height

two-columns