Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search



Hi everyone! 

I'm creating a large online store for a local art gallery. The site sells artwork from a multitude of artists in varying mediums. Because of this, images for the store have dimensions that vary a lot. Therefore, on my product details pages, many of the images are terribly cropped. 

I need to figure out a way to style the product details page and allow for the image's original aspect ratio to be maintained. 

I've been tweaking around with the CSS for hours, but can't figure out a way to make it work. I basically need the product detail page's image container to match the original aspect ratio of the photo that is displayed. 

Has anyone done this successfuly?! I have combed the internet with no luck. 

Any help would be greatly appreciated! Happy to give you the password to view the site if needed as it's not live yet.

Screen Shot 2020-05-15 at 12.07.52 PM.png

Screen Shot 2020-05-15 at 12.08.15 PM.png

Screen Shot 2020-05-15 at 12.08.22 PM.png

Share this post

Link to post

3 answers to this question

Recommended Posts

  • 0

There's another thread about this subject, so I'm linking to it here:


Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post

Link to post
  • 0

One (admittedly less than ideal) way of handling this is to create png files in the aspect ratio you've set and then save the file with a transparent background. For example, if you have the aspect ratio set at 4:3, create a blank image in Photoshop with no background at that ratio – so, say, 1500x1125px. Place your artwork image within those bounds so that it maxes out either the 1500 or 1125 dimension. Then save that as a png with a transparent background. Then upload that png file as your thumbnail. This way the images you're uploading are all technically 4:3, but to the viewer they will appear as if they're the ratio of the actual artwork.

Share this post

Link to post

Create an account or sign in to comment

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

  • Create New...