jquery - 将图像(横向和纵向)适合方形缩略图

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 属性显示缩略图，使用 no-repeat 显示 center。您必须指定包含 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>