javascript - 缩略图图像边框为正方形

Question

我有随机尺寸的图片，所有图片都小于 150x150。我正在尝试的是拥有 150x150 的 css 边框并将图像放在边框的中央。

.thumbnail {
    display: block;
    padding: 24px 2px 24px 2px;
    
    background-color: #FFF;
    border: 1px solid #DDD;
}

<img  style="max-width:150px;max-height:150px" data-imgpop="2" class="thumbnail img-responsive" src="http://pandatracking.com/storage/forum/thumb.php?w=150&amp;height=150">


<img  style="max-width:150px;max-height:150px" data-imgpop="2" class="thumbnail img-responsive" src="https://pandatracking.com/storage/forum/temp/admin-before.jpg">

如果无法使用纯 css 解决方案，欢迎使用 jquery 解决方案。

编辑:好的，正如我在下面尝试的评论所建议的那样..但是图像不是正方形的中心

 
#sidebar1 { 
    width: 150px;
    height:150px;
    border: 1px solid black;
    padding: 0px 0px 0px 0px;
}

.thumbnail {  
     
}

 
        <div id="sidebar1"><img  style="max-width:150px;max-height:150px" data-imgpop="2" class="thumbnail img-responsive" src="http://pandatracking.com/storage/forum/thumb.php?w=150&amp;height=150">
</div>
            
            
        

Answer 1

如果你用 div 包围每张图片并设置它的边框，那么你可以将小于 150px 150px 的图片放入容器 div >.

换句话说，用一个div包围每张图片，高度和宽度都是150px，里面放一张图片。