纯 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> 元素来解决这个问题，而是将缩略图作为包含元素的居中背景图像拉入，但是，如果可能的话，我想保留 @987654332 @页面中的元素。

感谢您提供的任何帮助或指点！

编辑：我想我应该注意，理想的解决方案可以在 IE 6+ 和现代浏览器中运行，但任何可以在 IE 9+ 和其他现代浏览器（最近的 WebKit、Gecko、等）将很高兴地被接受。

Answer 1

可能，可能。

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

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

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

这里是using ImageMagick to do thumbnails. 的短消息

Answer 2

您可以（在某种程度上）通过 CSS3 background-size 添加实现此目的：contain 和 cover。

Live Demo

• contain（上图）适合整个图像，保持纵横比。没有任何内容被裁剪。

• cover（下图）垂直或水平填充包含元素（取决于图像）并裁剪其余部分。

Answer 3

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

Answer 4

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

嗯，我知道，如果你想要一个更小的图像使其更大，更大的图像使其更小，你会希望它最大和最小。