I’ve recently replaced the source image for the images on my site and now they are all stretched when viewed on mobile devices (not when viewed in mobile preview mode, but only when viewed on an actual mobile device).
Here is an example of the stretching taken on a mobile device.
I didn’t make any style changes, only replaced the source file of the images, so this is a bit surprising. I’d like to to retain its aspect ratio on every device. Could somebody help me out?
Here is my site Read-Only: https://preview.webflow.com/preview/coygo-marketing?utm_medium=preview_link&utm_source=designer&utm_content=coygo-marketing&preview=e1d7330ada0269921ab55b276b1f239b&mode=preview
In the image settings, try to uncheck the HiDPI
btw - it would be helpful to have A published link of your site
You can also try an embed with the following css style for forcing cover mode onto your images
of course, the published link is www.coygo.app
some of the images have HiDPI checked, some don’t, so this can’t be the issue as they’re all stretched
didn’t work unfortunately
you got me close, adding
object-fit: contain to a class that I added to each image works. still not sure why this happened when all I did was change the image source file though
Update: I didn’t like the solution of adding custom CSS code, so I kept poking at it and it turned out that somehow a “width” property was added to each image
I unset it so that it defaulted to “Auto” and it all looks good