Question

我正在尝试使用具有完全高度的图像来修复一个问题，而该图像旁边的文本不固定。

我已经尝试将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处于相同的高度。

column1

关于img，如果你想让它占据全高，我建议你在div上使用背景图片：

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

这是一个有效的JsFiddle：DEMO

图像未使用动态文本

1 个答案: