使图像（横向和纵向）适合方形缩略图

Question

我真的很难让横向和纵向的图像很好地适合画廊的方形缩略图。

我尝试了各种 CSS 技巧，但认为我可能需要使用 Javascript。

有人知道我该如何解决这个问题吗？

编辑 - HTML/CSS 可以是任何东西，目前它只是打印出带有拇指方形类的图像，即。

<img class="thumb_square" src="/images/uploads/pic.jpg"/>
<img class="thumb_square" src="/images/uploads/pic2.jpg"/>
<img class="thumb_square" src="/images/uploads/pic3.jpg"/>

Answer 1

一种可能的解决方案（已测试）：在div 中显示每个缩略图。使用 css background 属性显示缩略图，center 使用 no-repeat。您必须指定包含div 的width 和height。将宽度和高度设置为所有缩略图的最大宽度/高度。 IE。如果您的缩略图是 150px*200px 和 200px*150px，请将所有 div 设置为 200px*200px。然后缩略图将在 200px*200px 框内居中，无论它们是处于纵向还是横向“模式”。

例子：

<div style="width:200px; height:200px;
   background: url('/images/uploads/pic.jpg') no-repeat center;
   border:1px solid red;">
</div>

<div style="width:200px; height:200px;
   background: url('/images/uploads/pic2.jpg') no-repeat center;
   border:1px solid red;">
</div>

<div style="width:200px; height:200px;
   background: url('/images/uploads/pic3.jpg') no-repeat center;
   border:1px solid red;">
</div>

Answer 2

我认为这正是您所需要的： 无论图像有多大，您都会看到整个高度（如果是横向）或宽度（如果是纵向）；

jFiddle：http://jsfiddle.net/ECRc4/3/

HTML：

<div class="thumb" style="background-image: url('http://placehold.it/250x500')"></div>
<br/>
<div class="thumb" style="background-image: url('http://placehold.it/500x200')"></div>
<br/>
<div class="thumb" style="background-image: url('http://placehold.it/100x200')"></div>

CSS：

.thumb{
    display:inline-block;
    width:100px;
    height:100px;
    background:center;
    background-size:cover;
}