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围绕每个图像并设置其边框，那么您可以将一个小于150像素150像素的图像放入容器中div。

换句话说，用div围绕每个图像，高度和宽度为150像素，内部放置图像。

Answer 2

使用div环绕图像并提供与其他元素的边框和间距。然后确保将line-height上的height，width和div设置为您想要的大小。将text-align: center;添加到div，将vertical-align: middle;添加到image。将图像内联呈现或垂直间距不适用非常重要。注意：我删除了内联样式并通过CSS应用它。我建议您避免使用内联样式。

http://jsfiddle.net/45kofx24/

的工作小提琴

＆＃13;

.thumbnail {
    display: block;
    background-color: #FFF;
    border: 1px solid #DDD;
    width: 150px;
    height: 150px;
    margin: 24px 2px 24px 2px;
    line-height: 150px;
    text-align: center;
}

.thumbnail img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

＆＃13;

<div class="thumbnail">
    <img data-imgpop="2" class="img-responsive" src="http://pandatracking.com/storage/forum/thumb.php?w=150&amp;height=150">
</div>
<div class="thumbnail">
    <img data-imgpop="2" class="img-responsive" src="https://pandatracking.com/storage/forum/temp/admin-before.jpg">
</div>

＆＃13;

缩略图图像边框为方形

2 个答案: