我想在网格中显示一组图像缩略图。图片将有多种尺寸,但我想将缩略图限制为特定尺寸(比如 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、等)将很乐意接受。
最佳答案
您可以(某种程度上)通过添加 CSS3 background-size
来实现这一点:contain
和 cover
。
contain
(上图)适合整个图像,保持纵横比。没有任何裁剪。cover
(下图)垂直或水平(取决于图像)填充包含元素并裁剪其余元素。
关于html - 纯 CSS 图像缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6131049/