4

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

我尝试了各种 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"/>
4

2 回答 2

6

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

例子：

<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>
于 2012-09-02T19:16:52.607 回答
4

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

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;
}
于 2014-03-04T10:04:04.390 回答