Jump to content

Scaling 1-column grid gallery to fit viewport height

Recommended Posts

I'm trying to create a single-column 'one-up' gallery, where each image is presented to fit the screen as you scroll.

However, the gallery's behavior is to scale the image to fit viewport width only. When a photo's aspect ratio is taller than the viewport (i.e. 4:3 photo on 16:9 window), this results in the image container being taller than the viewport, so you can't see the full image at once. The site URL linked demonstrates this, if you view the page at 16:9 or wider.

The expected/desired behavior is for the image should be scaled by either width or height, so that the images to fit the browser viewport regardless of aspect ratio.

Is this possible with custom CSS or some sort of album configuration?



Edited by acetech09
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • 2 weeks later...

Thanks for the reply.

That's the right direction. That does limit each grid item height, but that overflows the content of the item container, and just clips the top and bottom of the image.

I thought that maybe using object-fit: contain on the img itself (by default, it's cover) would then re-scale the image properly, but there's some weird interaction with the galler-grid-item-wrapper that I don't fully understand.

(removed the above custom block for now)

Edited by acetech09
Link to comment
  • acetech09 changed the title to Scaling 1-column grid gallery to fit viewport height

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.