Image streched in mobile view

[Aleksy]

I have a problem with image, the size is : 480x960

I put an image in a page and then I configure the size by code so it can fit perfectly the good dimension.

But the image is stretch in mobile view.

I don't know if it's because the image is long, maybe long images is not a good thing.

In desktop view, it's okay but in mobile view the image is stretched.

I'm confused about image dimension in shopify.

The url of the stretched image (in mobile view) :

https://20arhtxbyd9219ya-31264309293.shopifypreview.com/pages?preview_key=57f8119a0f18ef82f49415178d...

Thank you and sorry for my bad english !

[Wahab_Ahmad · Accepted solution]

Hello @Aleksy,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

@media only screen and (max-width: 768px) {
img, iframe {
object-fit: cover !important;
}
}

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

[Aleksy]

thank you a lot thats working !

But now the image is cut off like that

[Wahab_Ahmad · Accepted solution]

Hello @Aleksy,

Replace previous with this

@media only screen and (max-width: 768px) {
img, iframe {
object-fit: contain !important;
height: auto !important;
}
} 

[Aleksy]

that's perfect thank you

[iyoniajackson]

Hello there, could you help me with a similar issue. instead of an enlarge picture my picture is smaller!

[Cayla77]

This saved me! thank you so much for this information.

I appreciate you:-)