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

Product Detail Page Image Crop



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

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

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 helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

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.

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