html - 纯 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。

Live Demo

• contain(上图)适合整个图像，保持纵横比。没有任何裁剪。

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