How to Prevent Image Cropping in Gallery Slideshows on Squarespace 7.1
Squarespace’s full-screen and slideshow galleries look beautiful and are immersive, but often they crop your images, cutting off important visual content. As a photographer, artist, or business owner, you may want to maintain more control over how your work is displayed.
In this guide, you’ll find out how to avoid Squarespace 7.1 Gallery Sliders cropping my images by overriding some of the limited layout options and get your visuals displaying as you intend at all device sizes.
The Default Behavior: Cropped Images with object-fit: cover
Here are the dimensions Squarespace applies when you use a Gallery Slideshow:
object-fit: cover;
This means:
Pictures must fill the parent's width and height
Parts of the picture are cut off (notably the top/bottom or sides)
It's all very well and good to look flash, but if you don't have control, you're not very good.
The Fix: Change object-fit to contain
By changing the CSS property to object-fit: contain, you tell Squarespace to scale the image down proportionally so the entire image is visible, even if it means leaving some space around the image (like letterboxing or pillarboxing).
Step-by-Step Instructions
Go to: Pages → Custom code → Custom CSS
Paste the following code:
/* Prevent image cropping in gallery slideshows */
.gallery-fullscreen-slideshow .gallery-fullscreen-slideshow-item img {
object-fit: contain !important;
width: 100% !important;
height: 100% !important;
background-color: #000; /* Optional: fills empty space */
}
What This Code Does:
| Property | Function |
|---|---|
object-fit: contain |
Ensures the full image is always visible |
width/height: 100% |
Scales the image to fill its container without cropping |
background-color |
Fills gaps when the aspect ratio doesn’t match |
If your site has a light background, change #000 to #fff or a color that matches your brand.
Optional: Apply Only on Mobile
If you prefer cropped images on desktop but want no cropping on mobile, use:
@media screen and (max-width: 767px) {
.gallery-fullscreen-slideshow .gallery-fullscreen-slideshow-item img {
object-fit: contain !important;
background-color: #000;
}
}
Result: Letterboxed (Uncropped) Image Display
By using object-fit: contain, your images will:
Always appear fully visible
Maintain their aspect ratio
Avoid any unwanted cropping
This is ideal for:
Photography portfolios
Product showcases
Text-heavy graphics or infographics
Final Thoughts
If you're tired of Squarespace cropping your images in gallery slideshows, this CSS technique gives you full visual control. Whether you want to preserve full image visibility site-wide or just on mobile, object-fit: contain is a simple, elegant solution.
Frequently Asked Questions
-
That is correct, and yes, the adjustment is done to the entire site. If you want it to appear in only one slideshow, you’ll need to restrict the change to a given section.
-
This is because the full image is being displayed at its original aspect ratio. It’s just the space they occupy. You can switch up their color or make them transparent to better align with your site’s design.
-
Absolutely. You’re also able to target the adjustment solely to mobile screens, so your desktop maintains its sleek, cropped aesthetic, while mobile visitors see the full image.
-
No. The same idea applies to conventional slideshow galleries, too. If you are not full screen, you need to apply it like your regular slideshow layout.
-
Yes. You can define a “focal point” so that the image is grounded in a particular location (at top, center, or bottom, for example). And that can help you determine which part of the image will be getting the most attention as you resize.
