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。您必须指定包含width的{{1}}和height。将宽度和高度设置为所有缩略图的最大宽度/高度。即如果您的缩略图是150px * 200px和200px * 150px，请将所有div设置为200px * 200px。然后缩略图将在200px * 200px的框内居中，无论它们是纵向还是横向“模式”。

示例：

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;
}

将图像（横向和纵向）拟合为方形缩略图

2 个答案: