尺寸未知的 CSS 宝丽来风格图像答案

【问题标题】：CSS Polaroid Style Image with Unknown Dimensions尺寸未知的 CSS 宝丽来风格图像
【发布时间】：2011-12-01 05:26:34
【问题描述】：

我想使用 CSS 创建一个宝丽来风格的图像。但是，我想将图像平方以创建一个大缩略图，以便所有图像都具有相同的大小。我事先不知道图像的尺寸，它们可能不同。我正在考虑使用图形标签和 figcaption 来为照片添加标题。当图像的尺寸未知时，如何创建缩略图。我查看了Create Resizing Thumbnails Using Overflow Property 和Creating Thumbnails Using the CSS Clip Property，但似乎都没有考虑到未知维度。

【问题讨论】：

标签： css image dimensions

【解决方案1】：

This Example 使用溢出技术创建缩略图，只设置宽度，图像高度自动设置容器 div 然后隐藏超出您想要显示的多余图像。

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

This Example 让图像具有完整的 100% 宽度，并找到具有最短高度的图像，并将此高度应用于所有宝丽来图像，使所有宝丽来具有相同的高度。如果你真的不担心让它们每个高度相同。那就去做吧this way

【讨论】：

是否还有一种方法可以做到这一点，即图像必须是流动的（即宽度 100%）？
添加了上面的示例，显示了一种为图像提供全宽但仍设置高度的方法，另一个示例仅显示图像的全宽和全高，但仍保持宝丽来外观。

【解决方案2】：

使用figure 和figcaption 标签相当简单，而且我能够在没有任何多余标记的情况下重新创建效果。

真正重要的 CSS 是：

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

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

Demo

因为您推荐了它们，我相信您知道 figure 和 figcaption 是如何跨浏览器支持的。

【讨论】：

我仍然想创建相同的效果，但在具有流畅图像的布局中（即宽度 100%）。我怎样才能获得平方缩略图？

【解决方案3】：

Clip 仅适用于矩形。溢出可以正常工作，只需在类中定义图像的宽度即可。

Example

【讨论】：

如果图像具有流动宽度（即宽度 100%）怎么办？如何仍然创建方形缩略图？