html 正方形缩略图,html – 纯CSS图像缩略图

我想在网格中显示图像缩略图的集合.图像将会有各种尺寸,但我想将缩略图限制在特定的大小(我们说宽200像素,高150像素).

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

>允许图像包含在正常的< img>分子

>确保缩略图适合他们的200×150像素框,保持其比例,并以其溢出的任何维度为中心.

>不需要JavaScript或每个图像的实际尺寸的具体知识

我不知道这是否可行.我可以用以下标记对我想要的(坏)近似：

和CSS：

.thumb {

width: 200px;

height: 150px;

overflow: hidden;

}

.thumb img {

min-width: 200px;

min-height: 150px;

width: 200px;

}

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

>纵向方向的图像将被正确调整大小,但会溢出到容器的底部,导致垂直偏离中心的裁剪.

>由于硬编码的宽度和最小高度规则,宽和短的图像将在水平尺寸上扭曲.

>但是没有硬编码的宽度,大于最小高度和宽度的图像根本不会调整大小.

如果这是有帮助的,我已经举了一个例子,希望(希望)说明我在做什么,在这里：

我知道我可以通过省略< img>来解决这个问题.而是将缩略图作为集中的背景图像拉在包含元素上,但如果可能,我想保留< img>页面中的元素.

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

编辑：我想我应该注意到一个理想的解决方案将适用于IE 6和现代浏览器,但任何适用于IE 9和其他现代浏览器(最近的WebKit,Gecko等)的解决方案都将受到欢迎.