纯CSS图像缩略图

Question

我想在网格中显示图像缩略图的集合。图像会有各种大小，但我想限制缩略图到一个特定的大小（比如说200px宽和150px高）。

我想找到什么是一些神奇的HTML标记和CSS规则，将

1. 允许包括在正常<img>元素图像
2. 确保缩略图融入他们的200x150像素箱，保持它们的比例，并且以溢出的任何尺寸为中心。
3. 不按规定的JavaScript或每个图像的实际尺寸

我不知道这是可能的特定知识。我可以做什么，我想用下面的标记A（坏）近似：

<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>元素来解决此问题，而是将缩略图拉到中间的背景图像上aining元素，但是，如果可能的话，我想在页面中保留<img>元素。

感谢您提供任何帮助或建议！

编辑：我想我应该注意的是一个理想的解决方案将在IE 6+和现代浏览器的工作，但在IE 9和其他现代浏览器（WebKit的近期，蛤蚧等）可在任何解决方案很乐意接受。

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

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

Answer 4

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

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