How to Fix Stretched or Cropped Images on Product Pages in Squarespace 7.1
Are your merchandise photos appearing clipped, enlarged, or weird in your Squarespace shop? You're not alone.
As standard, Squarespace applies layout rules - these are often preset and force your product images to have a fixed aspect ratio, even if this means they lose the correct cropping or distortion (usually the case if you have both landscape and portrait product images).
In this tutorial, we’ll show you how to remedy these gripes with clean, lightweight CSS.
The Problem: Images Are Being Cropped or Distorted
If you're using this CSS:
.products.collection-content-wrapper .grid-item img {
object-fit: fill !important;
}
You might be seeing the following issues:
Product images are stretched unnaturally
Landscape photos appear squished
Portrait images look wide and blurry
That’s because object-fit: fill forces the image to fill its container without maintaining its original aspect ratio.
The Right Solution: Use object-fit: contain
Replace the previous CSS with:
.products.collection-content-wrapper .grid-item img {
object-fit: contain !important;
width: 100%;
height: auto;
}
Why This Works:
Maintains the original proportions of your image
Prevents cropping and distortion
Ensures the image resizes cleanly on all screen sizes
Optional: Make Image Containers More Flexible
To fully prevent cropping or forced sizing, apply this additional CSS:
.products.collection-content-wrapper .image-container,
.products.collection-content-wrapper .grid-item img {
aspect-ratio: auto !important;
object-fit: contain !important;
width: 100%;
height: auto;
}
This tells Squarespace:
Don’t force a specific aspect ratio (auto)
Let the image fit itself naturally within the layout
Adjust height dynamically based on each image
Expert Tip: When to Use Other object-fit Values
| object-fit Value | What It Does | Best Use Case |
|---|---|---|
fill |
Stretches the image to fill the space | Avoid for photos/products |
cover |
Fills container, but may crop | Great for hero banners |
contain |
Preserves aspect ratio, no cropping | Best for product grids and galleries |
Final Thoughts
Clean, uniform product photographs create trust and give your store branding a polished edge. Simply make the switch from object-fit: fill to object-fit: contain to ensure that your images aren’t stretching and cropping in unexpected ways, while staying true to their initial sizes.
If you’re using square, portrait, or landscape photos, with this single CSS tweak, you won’t have to worry about how your squarespace 7.1 product pages will display. Small tweaks like this not only improve design, they improve user experience, and may even aid sales.
Frequently Asked Questions
-
Squarespace product grids often enforce a fixed aspect ratio, and using object-fit: fill makes images stretch to fit that box. Switching to a ratio-friendly approach (contain) and letting the container height adjust prevents distortion.
-
Yes—when images keep their original proportions, you may see letterboxing or pillarboxing. This is normal and preferable to distortion; you can minimize the visual impact by using a background color that matches your theme and centering the image.
-
The majority of cropping problems seen in the default theme are in product grids and category pages. Product detail pages generally tend to obey the image ratio anyway, though, so if they don't, use a similar technique there.
-
Opt for high-quality originals around 1600–2000px on the long edge, compressed to around 500 KB. Go with JPG photo, PNG when needed for transparency, and only you can decide if you need all aspect ratios in your catalog. Reduce the jumps from layout to layout.
-
Make sure the source files are high-res, don’t upscale small images, and avoid applying inline CSS that caps max-width too aggressively. Also, be sure your browser isn’t zoomed and any lazy-loading or LQIP placeholder images are getting jacked in as you scroll.
