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

Question

我想用CSS创建一个宝丽来风格的图像。但是，我想对图像进行平方创建一个大缩略图，以便所有图像的大小相同。我事先并不知道图像的尺寸，它们可能不同。我正在考虑使用一个数字标签和figcaption来标注照片。如何在图像尺寸未知时创建缩略图。我查看了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

使用figure和figcaption标记非常简单，我可以在没有任何多余标记的情况下重新创建效果。

真正重要的CSS是：

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

并将position:relative;应用于figure，并使用figcaption上的相对定位，您可以获得整洁的宝丽来效果。

Demo

因为您建议使用它们，所以我们确定您知道浏览器支持figure和figcaption的方式。

Answer 3

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

Example