我如何獲得圖片有100％的高度

我正在使用引導程序模板並將頁面拆分爲固定的側邊欄，並且頁面的其餘部分是一個大圖片。但是，圖片與側邊欄的高度不匹配。即使側欄具有100％的高度，圖片之後總是有一個白色的間隙。那麼我怎樣才能讓我的照片佔用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; 
}

來源

2016-09-08 Y.Sas

試圖改變這樣的

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

來源

2016-09-08 08:57:13 Sasikumar

你把你的img在你給絕對位置的div，而你在第img位置相對e div，絕對位置。

position: absolute

放置一個絕對元素，意味着它的自我。有任何高度或任何元素周圍的寬度不會影響元素，這是絕對的。

我還沒有測試過，但你應該刪除position:absolute,position:relative和你的img周圍的股利。

來源

2016-09-08 08:57:57

我如何獲得圖片有100％的高度

回答

相關問題