我想在网格中显示一组图像缩略图。这些图片的大小不同,但我希望将缩略图限制为特定大小(比如说宽度为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 等)中工作的解决方案都将被欣然接受。