Question

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.

Answer 1

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