纯 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 （下图）垂直或水平填充包含元素（取决于图像）并裁剪 rest。

Answer 2

可能，大概。

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

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

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

这是关于使用 ImageMagick 做缩略图的教程。

Answer 3

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

好吧，我知道如果您想要一个较小的图像使其变得越来越大，那么您会希望它最大和最小，以使其更小。

Answer 4

尝试设置最大宽度和高度而不是最小值，因为如果图像不完全是那个大小，它将溢出:)