Equals heights of thumbnails with buttons - php

Question

I have this code:
foreach ($images as $key => $value)
{
$items[$key]['weight'] = $value['fid'].'_'.$value['weight'] ;
$items[$key]['image'] = ''.image_load($value['uri'],array("class"=>"img-thumbnail","thumbs"=>"medium")).'' ;
$items[$key]['title'] = '<span id="title_file_'.$value['fid'].'">'.$value['title'].'</span>' ;
//$cover = "<a href='javascript:void(0);' onclick='javascript:gallery_cover(\"".$value['fid']."\"); return false;' id='gallery_cover_".$value['fid']."' data-toggle='tooltip' class='data-tooltip' data-placement='top' data-original-title='Top' id='tooltip1'><span class='btn btn-default btn-sm glyphicon glyphicon-eye-".(isset($gallery_cover['value']) && $gallery_cover['value']==$value['fid']?'open':'close')."'></span></a>" ;
$edit = "<a href='javascript:void(0);' onclick='javascript:update_file(\"".$value['fid']."\"); return false;' class='btn btn-info' data-toggle='tooltip' class='data-tooltip' data-placement='top' data-original-title='Modifier' id='tooltip1'>Modifier</a>" ;
$delete = "<a href='javascript:void(0);' onclick='javascript:delete_added_image(\"".$value['fid'].'_'.$value['weight']."\"); return false;' class='btn btn-default' data-toggle='tooltip' class='data-tooltip' data-placement='top' data-original-title='Supprimer' id='tooltip1'>Supprimer</a>" ;
$items[$key]['actions'] = $edit." ".$delete ;
}
foreach($images as $key => $value)
{
if ($key % 4 == 0)
echo "<div class=\"row\">" ;
echo "<div class=\"col-md-3\">" ;
echo "<div class='thumbnail' style='min-height:280px;height:280px;'>".$items[$key]['image'] ."
<div>
<h4 style='min-height:50px;'>".$items[$key]['title']."</h4>
<p>".$items[$key]['actions']."</p>
</div>
</div>" ;
echo "</div>" ;
}
the result :
I want every thumbnais to have a fixed button and title.
Any solution for that ?
Thanks

Answer 1

Really, you should create thumbnails of specific dimensions then this would never be an issue. If however you can't/wont/whatever, then try some css:
<style>
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 300px;
height: 225px;
margin: -75px 0 0 -100px;
}
</style>
<div class="crop"><img src="1.jpg"></div>
<div class="crop"><img src="2.jpg"></div>
This will resize and crop.
Good luck :)