How to make images fit on homepage and product page?

[Mamdouh_USD]

Hello all,

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

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

[ProtoMan44]

@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;
}

[AiTrillion]

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.

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.

[Mamdouh_USD]

Hi @AiTrillion,

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

[AiTrillion]

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

[Mamdouh_USD]

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

[AiTrillion]

@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.

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