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.
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.
Rhino
