Product Photo stretch now Until Grid Border but the horizontal product photos stretch wrong.

Store Design

Topic summary

A user is experiencing image stretching issues on their Shopify store (Baseline theme) after implementing CSS code to fix white space at the bottom of product photos on collection pages.

Initial Problem (Problem 1):

  • Product photos on collection pages weren’t stretching to grid borders, leaving white lines at the bottom

New Issue Created (Problem 2):

  • After applying the fix, horizontal product photos on individual product pages became vertically stretched and deformed
  • The issue particularly affects products with 7 photos versus 6 photos
  • Color variation photos are also displaying out of dimension

Resolution Progress:

  • PageFly-Victor provided multiple CSS code iterations to address the issues
  • The main horizontal photo stretching was resolved
  • However, persistent problems remain with:
    • Some color variation photos still appearing stretched
    • White space around certain product images (specifically on the black t-shirt product page)

Current Status:
The discussion remains ongoing as the user continues to identify edge cases where horizontal images aren’t displaying correctly, requiring further CSS refinements.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
3

Hi @PageFly-Victor , thank you for your help but the code is not perfectly fixing it yet. It did fix the blue horizantal photo but som others not. I think it works when I have 6 product photos but it doesnt when I have 7 product photos. See photos attached.

Fixed : 6 Product photos ( oversize blue leather blazer)
Fixed : 6 Product photos ( oversize blue leather blazer)2872×1242 253 KB

Not fixed : 7 Product phoos ( oversize blue leather blazer)
Not fixed : 7 Product phoos ( oversize blue leather blazer)2816×1316 306 KB

PS: I have left the old code and added the new code behind the existing one, is that correct? See code below: