col-sm-4 height bootstrap - html

Question

I'm using bootstrap to display a set of sm-4 divs. Each of these includes a panel, which header contains an image. These images got variable sizes,however, I would like to get these columns to share the same height. Is it possible ?
So far, this is the 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>
Here's the CSS (This is what I tried so far)
.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%;
}
And, here's the result

Answer 1

CSS Units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin, padding, font-size, border-width, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted for some CSS properties, negative lengths are allowed
There are two types of length units: relative and absolute.
w3schools css units
.planepi {
min-height: 30vh;
height: 30vh;
max-height: 30vh;
overflow: hidden;
}
vh Relative to 1% of the height of the viewport

Answer 2

For anyone with the same problem, you need to specify the max-height of the div that holds the image:
.planepi {
max-height: 200px; //this is the max height you want
overflow: hidden; //everything that goes bellow 200px will be hidden
}
Of course it is easier for you to prepare the images to be in the same height, but this will work.