gallery image not fitting every mobile screen

[Domisana]

My website is domisana.com, I had problems with image gallery slider it was cropping photos on different mobile devices differently, I always upload square 1:1 but aspect ratio was changing depending on the mobile screen you view at.

Then I inserted the CSS code 

.product__media img { object-fit: contain !important; }

and now image is not cropped anymore but I have these white lines on the side depending on the mobile device I am viewing it at (for example iPhone 13 pro max works ok)

tell me is there some code to fix this, make image always appear in square aspect ratio 1:1 not crop it or stretch depending on the mobile device

[Moeed]

Hey @Domisana 

Replace your code with this code

.product__media img {
    object-fit: fill !important;
}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Domisana]

i dont want to stretch images, but to keep original aspect ratio, command fill only stretches and ruins image, is there another solution?

[Ahmad31 · Accepted solution]

.product__media.media.media--transparent {
    position: relative;
    width: 100%; /* Adjust width as per your layout */
    padding-top: 100%; /* Ensures a 1:1 aspect ratio */
    overflow: hidden;
}

.product__media.media.media--transparent img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

Replace your code with this code

[Domisana]

Thanks so much it works!!!

[Ahmad31]

You're welcome! @Domisana  Glad it worked for you. A coffee would definitely fuel more helpful solutions like this! 😉

[websensepro]

Hi @Domisana 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.product-media-container.constrain-height {
    min-height: 100vw !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!