适合页高的自举面板

-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

适合页高的自举面板

回答

相关问题