将横向和纵向的图片调整为正方形缩略图

Question

将横向和纵向的图片调整为正方形缩略图

jqueryhtmlcssimage

4

我很难把既是横向又是纵向的图片放入一个正方形缩略图中以用于画廊展示。

我尝试了一些 CSS 技巧，但认为可能需要使用 JavaScript。

有人有任何想法吗？

编辑 - HTML/CSS 可以是任何内容，目前只是简单地打印出类为 thumb-square 的图片。

<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"/>

- Carl Bembridge

发布您的缩略图和所有HTML。 - Ashirvad

我写了一个网络照片库，发现最简单的方法是将缩略图尺寸存储在数据库中，并根据这些尺寸设置<img>的左边距和上边距。但是你没有提供太多关于你的实现的信息，所以很难更具体地说明。 - Andrew Morton

如果您想让一个不匹配形状的图像始终完全填充到缩略图中，您有两个选择：1）您可以缩放/拉伸/挤压它以适应；2）您可以按比例缩放而不失真，并裁剪不完全适合的较长边。您想要哪一个？ - jfriend00

理想情况下，希望能够在不失真的情况下进行缩放，对于裁剪图像的部分我并不在意。 - Carl Bembridge

2个回答

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

- Nahn

谢谢您的回复，Nahn。这是一个很好的解决方案。因为旧版浏览器不支持Background-size:Cover（而且此客户正在使用旧版Internet Explorer），所以它并不完全适合这个问题。但是，这是一种很好的技术，可以在今后使用 :-) - Carl Bembridge

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- poplitea · Accepted Answer

一种可能的解决方案（已测试）：在一个div中显示每个缩略图。使用css background属性显示缩略图，使用no-repeat居中。您必须指定包含div的width和height。将宽度和高度设置为所有缩略图的最大宽度/高度。例如，如果您的缩略图是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>