我正在使用bootstrap来显示一组sm-4 div。其中每个都包括一个面板,该标题包含一个图像。这些图像的大小可变,但是,我想让这些列共享相同的高度。有可能吗?
到目前为止,这是html
<div class="row">
<a href="/app_dev.php/fly/50" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/AAT3.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Falaise - Dieppe</h4>
<p>3 places</p>
</div>
</div>
</div>
</a>
<a href="/app_dev.php/fly/48" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/BE36.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Bordeaux - Toulouse</h4>
<p>1 place</p>
</div>
</div>
</div>
</a>
<a href="/app_dev.php/fly/46" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/DA20.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Flers - Pontoise</h4>
<p>1 place</p>
</div>
</div>
</div>
</a>
</div>
这是CSS(这是我到目前为止尝试过的)
.flycard
{
text-align: left;
}
// EDIT : ADD THIS TO SOLVE THE PROBLEM
.planepi
{
max-height: 200px;
min-height: 200px;
overflow: hidden;
height: 100%;
width: 100%;
}
.planepi img
{
max-width:100%;
max-height:100%;
}
而且,结果是
答案 0 :(得分:1)
CSS单位
CSS有几个不同的单位来表示长度。
许多CSS属性采用“长度”值,例如宽度,边距,填充,字体大小,边框宽度等。 长度是一个数字,后跟长度单位,例如10px,2em等。
数字和单位之间不能出现空格。但是,如果值为0,则可以省略某些CSS属性的单位,允许负长度 有两种类型的长度单位:相对和绝对。
.planepi {
min-height: 30vh;
height: 30vh;
max-height: 30vh;
overflow: hidden;
}
vh 相对于视口高度的1%
答案 1 :(得分:0)
对于有相同问题的任何人,您需要指定保存图像的div的最大高度:
.planepi {
max-height: 200px; //this is the max height you want
overflow: hidden; //everything that goes bellow 200px will be hidden
}
当然,您可以更轻松地将图像准备到相同的高度,但这样可以。