尺寸未知的 CSS 宝丽来风格图像
我想使用 CSS 创建宝丽莱风格图像。但是，我想将图像方形化，创建一个大缩略图，以便所有图像的大小相同。我事先不知道图像的尺寸，它们可能会有所不同。我正在考虑使用图形标签和图形标题来为照片添加标题。当图像尺寸未知时如何创建缩略图。我查看了 使用溢出属性创建调整大小的缩略图 和 < a href="http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html" rel="nofollow">创建使用 CSS Clip 属性的缩略图，但似乎都没有考虑到未知的尺寸。
I want to create a polaroid style image using CSS. However, I'd like to square the image creating a large thumbnail so all images are the same size. I don't know the dimensions of the image beforehand and they are likely different. I was thinking of using a figure tag along with the figcaption to caption the photo. How do I create the thumbnail when the dimensions of the image are unknown. I looked at Create Resizing Thumbnails Using Overflow Property and Creating Thumbnails Using the CSS Clip Property, but neither seemed to account for unknown dimensions.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
此示例使用溢出技术仅通过设置图像的宽度和高度来创建缩略图是自动设置容器 div 然后隐藏超出您想要显示的多余图像。
然后，只需使用填充和容器 div，您就可以创建白色宝丽来效果。
此示例让图像具有完整的100%宽度，并找到高度最短的图像，并应用此所有宝丽来图像的高度，因此所有宝丽来图像的高度相同。如果您真的不担心它们的高度相同。然后这样做
This Example uses the overflow technique to create a thumbnail by only setting the width, and the height of the image is auto set The container div then hides the excess image beyond what you want to show.
Then by simply using padding and container divs, you can create the white polaroid affect.
This Example lets the image have full 100% width, and find image with the shortest height, and applies this height to all the polaroid images so all the polaroids are the same height. If you aren't really worried about having them each the same height. Then do it this way
使用
figure和figcaption标签非常简单，我能够在没有任何多余标记的情况下重新创建效果。真正重要的 CSS 是：
通过将
position:relative;应用于figure，并在figcaption上使用一些相对定位，您可以能够获得整齐的宝丽来效果。演示
因为您建议了它们，所以我确信您知道如何
figure和figcaption跨浏览器支持。It is fairly simple with the
figureandfigcaptiontags, and I was able to recreate the effect without any superfluous markup.The really essential CSS is:
and by applying
position:relative;tofigureas well, and using some relative positioning on thefigcaption, you are able to get a neat Polaroid effect.Demo
Because you suggested them, I'm sure you know how
figureandfigcaptionare supported across browsers.剪辑仅适用于矩形。溢出就可以正常工作，只需定义类中图像的宽度即可。
示例
Clip only works with rectangles. Overflow will work fine, just define the width of the images in the class.
Example