画像は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{   

     } 

    } 

は、それが今の私のブラウザで見ている方法です。

だから何私は欠けている画像のために、列の完全な高さを取る、それは大丈夫ですp完全な高さを取る限り、画像の芸術は切り取られます。

ありがとうございます！

Answer 1

Flexboxを使用すると、2つのdivを同じ高さに設定できます。 IMGについて

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

あなたはそれが完全な高さを取りたい場合は、私はdiv要素に背景画像を使用することができrecommandます：

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

ここでの作業JsFiddleです：DEMO