纯CSS图像缩略图

Question

我想在网格中显示图像缩略图的集合.图像将有各种尺寸,但我想将缩略图限制为特定尺寸(让我们说200px宽和150px高).

我想要找到的是一些神奇的HTML标记和CSS规则

1. 允许图像包含在普通<img>元素中
2. 确保缩略图适合其200x150像素的盒子,保持其比例,并以它们溢出的任何尺寸为中心.
3. 不需要JavaScript或每个图像的实际尺寸的特定知识

我不确定这是否可行.我可以使用以下标记对我想要的(坏)近似:

<div class="thumb">
    <img src="360x450.jpeg">
</div>

和CSS:

.thumb {
    width: 200px;
    height: 150px;
    overflow: hidden;
}
.thumb img {
    min-width: 200px;
    min-height: 150px;
    width: 200px;
}

这种尝试以各种方式打破:

1. 纵向方向的图像尺寸正确,但会从容器底部溢出,导致垂直偏心裁剪.

2. 由于硬编码width和min-height规则,宽和短的图像在水平维度上会失真.

3. 但如果没有硬编码width,大于最小高度和宽度的图像将根本不会调整大小.

如果它有用,我会举一个例子来(希望)说明我想要做的事情,在这里:

• http://overloaded.org/tmp/imgtest/
• http://overloaded.org/tmp/imgtest/imgtest.zip

我知道我可以通过<img>完全省略元素来解决这个问题,而是将缩略图拉成包含元素的居中背景图像,但是,如果可能的话,我想将<img>元素保留在页面中.

感谢您提供的任何帮助或指示!

编辑:我想我应该注意到理想的解决方案适用于IE 6+和现代浏览器,但任何适用于IE 9+和其他现代浏览器(最近的WebKit,Gecko等)的解决方案都将很乐意接受.

Answer 1

你可以通过增加CSS3来实现这一目标background-size:contain和cover.

现场演示

• contain(上图)适合整个图像,保持纵横比.没有任何东西被裁剪.

• cover (底部图片)垂直或水平填充包含元素(取决于图像)并裁剪其余部分.

Answer 2

有可能，大概。

而且，可能不是最好的主意。这里要克服的大问题是缩略图的方向。如果您正在处理全景图怎么办？当然，缩小它会产生一个非常难看的“挤压”图像，就像一个非常高的图像一样。很少有人 100% 的时间都进行 4X3 或 16X9 交易。因此，您需要一种机制来填充图像。即使比例是正确的，它也不会像使用 Photoshop 或 Gimp 等程序那样干净地调整大小。

这个思考过程中的另一个主要问题是您将通过较大的图像向服务器发送大量不必要的数据。加载时间会更长，不必要地填充 DOM，并且总体上只会抑制 UI 体验。

有很多方法可以解决这个问题，但没有一个是纯 CSS 的。我已经多次解决过这个问题，每次都根据客户的情况采用独特的方式。对于一个想要完全定制的客户来说，它是一个定制上传器，通过 iMagick（图像魔法的一部分）调整大小，并为具有主要交互性的相册定制 CSS/Javascript。在另一个例子中，我使用Gallery作为后端——处理缩略图创建、上传、标题、裁剪和组织——然后将重新格式化的图像链接从数据库中拉出，以更吸引人的方式显示它们。您可以省去更多麻烦，只需使用 Flickr api 之类的东西来提取图像供您使用。

这里介绍一下如何使用 ImageMagick 制作缩略图。