Image streched on mobile

Fill out the following bug report template with as much detail as possible!

Are you sure this is a bug? If you just need help, post in the developer help category. If it’s a feature request, head to the ideas category.


Issue Summary

  • Explain roughly what’s wrong
    I’ve used the image element to add on image to my post and it’s stretched vertically when I view it on mobile
  • What did you expect to happen?
    The image should be resized properly

Steps to Reproduce

  1. This is the first step…
    Add an image using the image element
  2. This is the second step, etc.
    Preview the post on mobile

Setup information

I wasn’t the one to set it up. I have administrator access to the platform but can’t seem to find where this information would be written.

Ghost Version
Share which version of Ghost you’re using.

Node.js Version
If self-hosting - share which version of Node.js you’re using.

How did you install Ghost?
Provide some details about your install of Ghost if you are self-hosting.

Provide details of your host & operating system
Include further details about your hosting and OS.

Database type
MySQL 5.7 / MySQL 8 / SQLite 3 / Other

Browser & OS version
Include if reporting frontend bugs.

Relevant log / error output
Copy and paste any relevant log output. Use backticks to format this into code.

Are you able to share a link? What theme are you using?

My guess is that you need to add height: auto to your CSS.

That actually worked. Thank you!

Awesome!

A little bit more background on why that worked in case you were wondering.

Ghost automatically adds height and width attributes to images in posts. This is essential for optimizing your site because it prevents jankiness when loading (where the page moves in the middle of reading it) and allows for smart lazy loading.

Because of these attributes, though, you need to specify that the height should be set to auto based on the image’s width.

Here’s an article from Smashing Magazine that goes over all this in more detail.

Importantly, I’m glad it’s working! :grinning_face_with_smiling_eyes: