Photo Size is Not Consistent Page to Page

Using Ghost
1

New to Ghost. I’ve created a couple of test posts and find my photos change size depending on where they’re viewed. They seem to be “responsive.” I don’t want them responsive. They should be the same on every page.

Is it possible to get fix the size so they are the same on every page?

Ghost Screenshots
Ghost Screenshots4074×1223 465 KB

2

Welcome :pray:

Out of interest, what is the original image file size (dimensions) and also what theme are you using?

3

Photo is 180 x 214
Theme is Headline

4

Is it possible I need to inject some code into the CSS?

5

This is the expected behavior for Headline, which attempts to crop your images to make them fit nicely in its layout. That’s great for pictures of scenery, and bad for chopping heads.

To fix the homepage small images, try:

<style>
.gh-topic-grid .gh-card-image img { object-fit: contain!important }
</style>

That basically tells Ghost not to crop your images, but it means you may have unexpected white margins around them.

6

I got some help from Ghost Support, who recommended the following code injection:

.gh-topic-grid .gh-card-image img { object-fit:contain; }

This helped with the cropping problem on the home page. However, it didn’t resolve the oversized image on the post page. In inspecting the code, I see that there is a way to limit the image size, e.g.,

.gh-article-image img { width: 50%; }

Not sure if it’s the best approach but it works fine, so problem solved.

Thanks to all !!!
Frank

1 Like