Images stretched on mobile, need help fixing


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:

In the image settings, try to uncheck the HiDPI


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


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

  .yourImageClassName {
  object-fit: cover;

of course, the published link is

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