将图像(横向和纵向)拟合为方形缩略图

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

一种可能的解决方案(已测试):显示a中的每个缩略图div.使用css background属性显示缩略图,并center使用no-repeat.您必须指定width和height包含div.将宽度和高度设置为所有缩略图的最大宽度/高度.即如果您的缩略图是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>