Streaming live at 10am (PST)

Making Thumbnails Square

Hey Crew,
I’m trying to figure out how I can make all thumbnails square in the ‘Artworks Template’ CMS page template of this site. I’ve utilized the new ‘Multi-Image’ field in CMS collections, and have them setup with lightbox. But if some images are portrait, and others landscape, I feel it will look janky.

Thank you!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Generally speaking, when images have different aspect ratios and you want want to make them appear square, you will set the background image to cover (center 50%, %50) then provide equal pixel dimensions of that containing element to the same width and height for dimensions.

Video is another issue.

What Jeff said.

I can also suggest using object-fit property to make your thumbnail images behave like backgrounds while not being backgrounds and retaining all the useful features of an image.

Just add this into your custom code:

.img-cover {
object-fit: cover;

Then add class of img-cover to your images inside the thumbnails.

1 Like

CMS aspect ratio tutorial:

Summary of the tutorial (In your case change padding-b to 100%)

Hey Ezra

Thanks so much for taking the time to explain this. This has been a great help, both the responsive images and masonry grid. Thanks so much.


1 Like