Question

我想在网格中显示图像缩略图的集合。图片会有各种尺寸，但我想将缩略图限制为特定尺寸（比方说200px宽，150px高。）

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

允许图片包含在普通<img>元素
确保缩略图适合其200x150像素的盒子，保持其比例，并以它们溢出的任何尺寸为中心。
不需要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;
}

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

纵向图像尺寸正确，但会从容器底部溢出，导致垂直偏心裁剪。
由于硬编码width和min-height规则，宽和短的图像会在水平维度上失真。
但如果没有硬编码width，大于最小高度和宽度的图像将根本不会调整大小。

如果它有用，我会举一个例子（希望）说明我想做的事情，在这里：

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

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

编辑：我想我应该注意，理想的解决方案适用于IE 6+和现代浏览器，但任何适用于IE 9+和其他现代浏览器的解决方案（最近的WebKit，Gecko，将很乐意接受。

Answer 1

您可以（通过CSS3 background-size添加内容实现此目的：contain和cover。

<强> Live Demo

contain（上图）适合整个图像，保持纵横比。什么都没有被裁剪。
cover（下图）垂直或水平填充包含元素（取决于图像）并裁剪其余部分。

Answer 2

可能，可能。

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

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

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

这是using ImageMagick to do thumbnails.

上的啧啧

Answer 3

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

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

Answer 4

尝试设置max-width和height而不是min，因为如果图像不是那么大，它会溢出：）

纯CSS图像缩略图

4 个答案: