適合頁高的自舉面板

-1

我希望面板和圖像處於固定的高度，以便它不會大於頁面，並且沒有滾動條。我將如何歸檔這個？適合頁高的自舉面板

<div class="container"> 
      <div class="col-md-8"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading">Panel</div> 
       <div class="panel-body"> 
        <img src="https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/16864258_1261558947267706_6364934376555931917_n.jpg?oh=99e2734014dbdc9080048e0c6022e132&oe=5973503B" width="100%" height="100%"> 
       </div> 
      </div> 
     </div> 
</div>

https://jsfiddle.net/58br0n1g/

來源

2017-02-26 mynamejeef123

如果圖像的高度是固定的，它不能相對於高低不一的頁面？請澄清這個問題。 – ZimSystem

有幾種方法可以解決這個問題。

首先，您想要約束面板的高度，使用max-height: 100vh;這會將面板的最大高度設置爲100個視口高度單位，即100％的高度。

其次，我們需要處理圖像，因爲您已將圖像設置爲100％100％，圖像可能會溢出容器。因此您需要決定如何顯示圖像。這裏有幾種選擇：

將overflow: hidden;添加到面板，這意味着任何多餘的圖像將不會顯示。
在CSS中使用background-image: url(/path/to/image.jpg);而不是內嵌圖像元素。這意味着您可以利用各種背景大小的屬性，例如background-size: cover;將確保圖像始終填充100％的背景。值得對此進行一些研究。

希望有所幫助。

來源

2017-02-26 12:28:41

適合頁高的自舉面板

回答

相關問題