等于带按钮的缩略图高度

Question

我有这段代码：

foreach ($images as $key => $value)
{
$items[$key]['weight'] = $value['fid'].'_'.$value['weight'] ;
$items[$key]['image'] = '<a href="'.image_url($value['uri']).'" data-lightbox="gallery-image_'.$value['fid'].'">'.image_load($value['uri'],array("class"=>"img-thumbnail","thumbs"=>"medium")).'</a>' ;
$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>" ;

} 结果：

我希望每个thumbnais都有一个固定的按钮和标题。 任何解决方案？

由于

Answer 1

实际上，您应该创建特定尺寸的缩略图，然后这绝不会成为问题。但是如果你不能/不会/无论如何，那么试试一下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>

这会调整大小并裁剪。

祝你好运：）