How to auto-fit photos on product page without cropping?

Store Design
,

Topic summary

A Shopify store owner is experiencing image cropping issues across multiple pages (product pages, homepage, and collection pages). Photos are being cropped instead of auto-fitting to display properly in portrait orientation.

Solutions Provided:

  • Product grid images: Added CSS code to component-card.css using object-fit: contain to prevent cropping
  • Homepage images: Modified component-card.css with .card__inner { height: 100%; } to fix display issues
  • Image proportions: Adjusted aspect ratios in base.css using custom padding-bottom values and global-media-settings selectors to make oversized images (like “yoga frog”) more proportional
  • Product page images: Applied similar padding adjustments to control image sizing on individual product pages

All CSS modifications were added to the bottom of their respective files in the theme’s code editor. The user encountered a minor syntax error (missing closing brace) during implementation but successfully resolved all issues with the provided code snippets. The discussion reached full resolution with all image display problems fixed.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

A number of my photos are cropped on the product page. Is there some sort of code to have it auto-fit in a portrait size without being cropped? I tried the code recommended here, but it distorted the image.

aelitzer_1-1674061991752.png
aelitzer_1-1674061991752.png400Ă—328 69 KB

Thanks in advance!

2

Hi @aelitzer

Could you share your url store and password? I will help to check it.

3

there’s not a ton more to see besides the screenshot but it’s https://1ca775.myshopify.com/.

password is labelshopper

4

Hi,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/component-card.css
  3. Add code below to bottom of file
body .card__media .media img {
	object-fit: contain;
}
2 Likes
5

Yes, this did the trick. thank you so much!!

6

@EBOOST I’m running into the same issue on my home page now. Is there something similar I can add to my homepage to have the same effect? Thank you!

Screen Shot 2023-01-20 at 4.03.56 PM.png
Screen Shot 2023-01-20 at 4.03.56 PM.png898Ă—335 76.1 KB

7

Hi @aelitzer

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/component-card.css
  3. Add code below to bottom of file
.card__inner { height: 100%;}
8

Yes! That did it!

One follow-up question - is there a way to make an image like the “yoga frog” shorter and more proportional to the other photos? It is also quite large on the product page as well?

Screen Shot 2023-01-22 at 7.02.46 PM.png
Screen Shot 2023-01-22 at 7.02.46 PM.png918Ă—818 144 KB

Screen Shot 2023-01-22 at 7.07.05 PM.png
Screen Shot 2023-01-22 at 7.07.05 PM.png550Ă—749 107 KB

Really appreciate your help!!

9

Hi @aelitzer

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/base.css
  3. Add code below to bottom of file
.card__inner.ratio::before {
  padding-bottom: 100%;
}
.global-media-settings[style="padding-top: 309.0909090909091%;"]{
    padding-bottom: 100%!important;
}
.global-media-settings[style="padding-top: 309.0909090909091%;"] img {
	object-fit: contain;
}
10

Unfortunately that one did not appear to change anything

11

Hi @aelitzer

your file is missing “}”. You can check the screenshot below

EBOOST_0-1674522606065.png
EBOOST_0-1674522606065.png779Ă—891 30 KB

12

That’s great thank you!!

Less important, but is there any way to apply a similar code to the product page itself? The photo is quite large https://1ca775.myshopify.com/products/cast-iron-yoga-frog

13

Hi @aelitzer

Could you adjust like the screenshot?

EBOOST_0-1674572255832.png
EBOOST_0-1674572255832.png767Ă—532 29.8 KB

.global-media-settings[style="padding-top: 309.0909090909091%;"]{
    padding-top: 100%!important;
}
14

That’s perfect - thank you!