纯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 等）中工作的解决方案都将被欣然接受。

- Will McCutchen

---

根据您指定的规则，我认为这是不可能的。您需要使用JavaScript查询加载的图像大小以执行计算，否则将有50％的概率破坏宽高比。我实际上使用缓存PHP服务来完成此操作...虽然从技术上讲没有违反您的规则，但可能违背了其精神。：） - John Green

是的，这正是我担心的。不过我还是想问一下，以防万一。 - Will McCutchen

你不能只使用生成的缩略图吗？ - Midas

@Midas 我已经使用了生成的缩略图，它们保持了原始图像的纵横比而不进行裁剪。我希望能够避免在服务器上进行裁剪，但看起来我必须这样做。 - Will McCutchen

Answer 1

您可以使用 CSS3 的 background-size 属性来实现这个效果，具体有两种方式：contain 和 cover。

查看演示

• contain（上图）会将整张图片等比例缩放，直到完全适应容器。不会裁剪图片。

• cover（下图）会将图片等比例缩放，并填满容器。超出容器的部分会被裁剪掉。

- drudge

---

是的，但我更喜欢使用真正的<img>元素而不是CSS背景。 - Will McCutchen

你不会找到一个纯CSS的解决方案来保持宽高比。 - drudge

Answer 2

可能吧，也可能不是最好的主意。你需要克服的主要问题是缩略图的方向。如果你处理全景图呢？当然，缩小它会创建一个非常难看的“挤压”图像，一个非常高的图像也是如此。很少有人100%使用4X3或16X9。所以，你需要一个机制来填充图像。即使比例正确，它也不会像Photoshop或Gimp这样的程序那样清晰地调整大小。

这个思路中的另一个主要问题是，通过较大的图像，你将发送大量不必要的数据到服务器。它将需要更长时间来加载，不必要地填充DOM，并总体上抑制UI体验。

有许多方法可以解决这个问题，但没有一种是纯CSS的。我曾几次尝试过，每次都是根据客户的需求采用独特的方式。对于一个想要完全自定义的客户，我使用了自定义上传器，通过iMagick（image magic的一部分）进行调整大小，以及专门的CSS/Javascript相册与主要互动。在另一个实例中，我使用Gallery作为后端——处理缩略图的创建、上传、标题、裁剪和组织——然后只是从数据库中提取重新格式化的图像链接以更吸引人的方式显示它们。你甚至可以节省更多麻烦，只需使用像Flickr api这样的东西来获取你需要的图片。

这里有一个使用ImageMagick缩略图的教程。

- bpeterson76

---

我已经在服务器上生成缩略图，但是我生成的方式保持了宽高比，没有进行裁剪。我本来希望避免在服务器上进行裁剪，但看起来我必须这样做。谢谢！ - Will McCutchen

Answer 3

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

对于缩略图，如果您想要将较小的图像放大，或者将较大的图像缩小，您需要设置最大值和最小值。

- buhbang

---

这将导致任何宽高比不为4x3的图像缩略图失真。 - Will McCutchen

Answer 4

尝试设置最大宽度和高度，而不是最小宽度和高度，因为如果图像的大小不完全相同，它会溢出 :)

- cmplieger

---

但是，太小的图像将不会被放大。我认为有太多的边角情况，使得我的“理想”解决方案不可能实现。 - Will McCutchen