Images stretched on mobile, need help fixing

Design help General
1

Hello,

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.

image
image1080×1920 380 KB

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?

Thanks

Here is my site Read-Only: Webflow - Coygo marketing

2

In the image settings, try to uncheck the HiDPI

40

btw - it would be helpful to have A published link of your site :slight_smile:

3

Hi,

You can also try an embed with the following css style for forcing cover mode onto your images

<style>
  .yourImageClassName {
  object-fit: cover;
}
</style>
4

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

5

didn’t work unfortunately

6

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

7

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

image

I unset it so that it defaulted to “Auto” and it all looks good

2 Likes