具有未知尺寸的CSS宝丽来风格图像

Question

我想使用CSS创建宝丽来风格的图像。但是，我想将图像放大以创建大缩略图，以便所有图像的大小相同。我事先不知道图像的尺寸，它们可能不同。我正在考虑使用数字标签和无花果标注照片。如何在图像尺寸未知时创建缩略图。我看着Create Resizing Thumbnails Using Overflow Property和Creating Thumbnails Using the CSS Clip Property，但都没有考虑到未知尺寸。

Answer 1

This Example采用溢流技术仅通过设置宽度创建缩略图，图像的高度是自动设置的div容器然后隐藏多余的图像超出你想显示什么。

然后通过简单地使用填充和容器div，您可以创建白色宝丽来影响。

This Example让图像有完整的100％宽度，并找到最短高度的图像，并将这个高度应用于所有的宝丽来图像，因此所有的宝丽来都是相同的高度。如果你真的不担心让他们每个人身高相同。然后做this way

Answer 2

剪辑仅适用于矩形。溢出将正常工作，只需定义类中图像的宽度。

Example

Answer 3

这与figure和figcaption标签相当简单，我可以重新创建没有任何多余标记的效果。

真正重要的CSS是：

figure{height:155px; width:125px; overflow:hidden;} 

，并通过应用position:relative;到figure为好，并使用在figcaption一些相对定位，你可以得到一个整洁的宝丽来效果。

Demo

因为你建议他们，我敢肯定，你知道如何figure和figcaption跨浏览器的支持。