사진 높이 100 %로 얻는 방법

Question

부트 스트랩 템플릿을 사용하고 페이지를 고정 된 사이드 바에 나누었으며 페이지의 나머지 부분은 큰 그림입니다. 그러나 사진은 세로 막대의 높이와 일치하지 않습니다. 사이드 바의 높이가 100 %인데도 그림 뒤에 항상 흰색 틈이 있습니다. 그렇다면 어떻게 사진을 100 % 높이로 만들 수 있습니까?

내 HTML :

<div class="container-fluid"> 
<div class="row content"> 
    <div class="col-sm-3 sidenav"> 
    <div class="sidebar affix"> 
    </div> 
    </div> 
    <div class="col-sm-9 pic"> 
    <div><img src ="homepage/pic5.jpg" class="img-responsive"></div>  
    </div> 
</div> 
</div> 

내 CSS는 :

.row.content { 
    height: 684px; 
} 

.sidenav { 
height: 100%; 
} 

.pic .img-responsive { 
    height: 100%; 
} 

.pic { 
    padding: 0; 
    position: relative; 
} 

.sidebar { 
    width: 22.5%; 
    top: 0px; 
} 

.pic > div { 
    position: absolute; 
} 

Answer 1

에 한번 같이 변경하려면이

.pic > .img-responsive { 
    height: 100%; 
} 

Answer 2

당신은 당신의 img 당신이 절대 위치를 제공 div에 배치되어, 반면에 당신은 img 위치를 th e div 절대 위치입니다.

position: absolute 

요소 자체를 의미하는 절대 위치를 지정합니다. 주위의 모든 요소의 높이나 너비가 요소에 영향을 미치지 않으므로 절대적입니다.

나는 그것을 테스트했지만, img 주위에 position:absolute, position:relative 및 div를 제거해야합니다.