Changing aspect ratio of images across screens

Store Design
, ,

Topic summary

A user is experiencing inconsistent image aspect ratios in collection components on their Shopify website redesign. On desktop, images appear stretched horizontally, while on mobile they display in a vertical/portrait orientation. The goal is to maintain square aspect ratios across all screen sizes to maximize visible product information.

Proposed Solution:
Another user suggested CSS code targeting collection images:

  • Set width: 100% and height: auto for responsive sizing
  • Apply aspect-ratio: 1 / 1 to enforce square dimensions
  • Use object-fit: cover to fill the space without distortion

The discussion remains open, with no confirmation yet on whether the CSS solution resolved the issue. Images are central to understanding the problem, showing the visual discrepancy between desktop and mobile displays.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

I am launching a new version of my company’s website here: https://q4o36omartauwkd1-63540789479.shopifypreview.com

I’m running into these weird aspect ratios in collection components where the images look like this on large desktops:

gabbym0062_0-1741459568854.png
gabbym0062_0-1741459568854.png1978×584 123 KB

And like this on mobile:

gabbym0062_1-1741459594627.png
gabbym0062_1-1741459594627.png386×477 77.4 KB

I would like them to stay square, as it shows the most amount of information.

Would anyone be able to provide some insight?

Thank you,

Gabrielle

2

Hi,

Hope this css will help you

CSS code example (Look for the section where images are styled)

.collection img {
  width: 100%; /* Makes the image fill its container */
  height: auto; /* Keeps the proportions */
  aspect-ratio: 1 / 1; /* Forces a square shape */
  object-fit: cover; /* Ensures the image fills the space without distortion */
}