이미지가 동적 텍스트가있는 div 옆에있는 콘테이너의 전체 높이를 사용하지 않습니다.

Question

고정되지 않은 텍스트가있는 div 옆에 전체 높이로 이미지를 맞추려고 할 때 현재 문제가 있습니다.

최대 너비, 최대 높이를 100 %로 설정하고 배경 이미지로 설정해 보았지만 여전히 해결책을 찾을 수 없습니다.

다음

.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{   

     } 

    } 

이 지금 내 브라우저에서 찾는 방법 : 여기

<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입니다 : 여기

내 마크 업입니다

그래서 누락 된 이미지의 경우 열의 전체 높이를 사용합니다. p이면 가능합니다. 전체 높이를 사용하는 한 이미지의 예술이 잘립니다.

미리 감사드립니다.

Answer 1

Flexbox을 사용하면 동일한 높이에서 두 div를 사용할 수 있습니다. IMG 소개

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

, 당신이 그것을 전체 높이를 가지고 싶다면, 내가 사업부에 배경 이미지를 사용하도록 운영자 추천합니다 :

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

가 여기

가 작동 JsFiddle입니다 : DEMO