How to make images fit on homepage and product page?

Technical Q&A
, ,

Topic summary

A Shopify store owner needs help making product images fit properly in their display boxes on both the homepage and product pages.

Initial Solutions Offered:

  • One responder suggested adding CSS code (object-fit: contain) to the custom CSS box in the theme customizer
  • Another recommended adjusting the image ratio setting to “Adapt to image” in the Featured Collection settings under Online Store > Customize

Homepage Issue Resolved:
The “Adapt to image” setting successfully fixed the homepage display.

Product Page Mobile Issue:
Images still appear cropped on mobile view for the product page. The final solution provided involves adding specific CSS code targeting mobile screens (max-width: 749px) to adjust the .product__modal-opener height property.

Implementation:
The CSS should be added either to theme.css/base.css files or through the Custom CSS section in theme settings.

The discussion remains open pending confirmation that the mobile product page fix works.

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

Hello all,

I want to make images of products fit the box on homepage and product page.

Store URL: https://u7yeji-na.myshopify.com

IMG_CB0D0B264D29-1.jpeg
IMG_CB0D0B264D29-1.jpeg1125×2436 195 KB

2

@Mamdouh_USD , hey, thanks for posting here.
Please add this CSS in the custom CSS box in the customizer.

.card__media .media img {
    object-fit: contain;
    background: #fff;
}

ProtoMan44_0-1751368900103.png
ProtoMan44_0-1751368900103.png441×362 43.7 KB

3

Hi @Mamdouh_USD ,

To adjust the image, go to Online store >> Customize >> click on Featured collection or collection and change the image ratio to Adapt to image which will automatically display whole image according to width.

AiTrillion_0-1751369128079.png
AiTrillion_0-1751369128079.png1919×796 234 KB

If you stuck somewhere, feel free to message me or reply here. All the collections settings are same for both the home page and collection page.

4

Hi @AiTrillion ,

It worked perfectly on homepage but not on prdocut page. Can you help?

5

@Mamdouh_USD Basically, on the product page, the image doesn’t get cropped. The image is perfectly appearing. Can you please share the screenshot?

AiTrillion_0-1751370450453.png
AiTrillion_0-1751370450453.png1896×902 161 KB

6

On mobile view, the image gets cropped. You can check it.

7

@Mamdouh_USD Please add the below code at Online store >> Edit code >> add to theme.css or base.css or go to Online store >> Customize >> Settings >> Custom CSS and paste the below CSS.

AiTrillion_0-1751372766058.png
AiTrillion_0-1751372766058.png1915×856 149 KB

@media screen and (max-width: 749px) {
.product__modal-opener {
height: 100%;
}
}