Hey,
I’m trying to upload a custom image for my blog post but the default behavior is not what I want: only a part of the image is shown instead of fitting the image in the available space.
It looks good when I upload the image but when I preview the post, it looks odd:
I first used an svg and then manually created a png which was 520px wide to see if that changes things but it didn’t. This seems to be the case both in the Ghost desktop app and on the web.
I’m using version 2.31.0 of Ghost.
Is there a way to control how the image will be shown?
Thank you,
Balint
Howdy there! The feature image in Casper has a size of 1600 by 1050, if you can resize your image to fit closer to those dimensions is should fit in the space much better 
Thank you for your quick reply.
I made the image 1600px wide and keeping the aspect ratio, the width came out to be 429px. I thought the height doesn’t matter as much but I didn’t expect it to be perfect. However, it seems nothing much has changed, I still see something very similar to the above screenshot.
I verified and the uploaded, linked image is the new one, the one that can be found here:
The image is transparent but I guess I can fiddle with making it the right height but I’m not sure if that will rectify things.
Yea, I’m afraid you need to match the size more accurately. It’s either that or put a bit of CSS into your post code injection field. By default Casper sets post feature images to cover the feature space, this piece of code will make it fit the space:
<style>
.post-full-image img {
object-fit: contain;
}
</style>
You might get a better result by using the code above
I tried the above css rule on an existing post (where I use an image from Unsplash) and it adds a grey padding on the sides so I’ll probably just pass for the time being.
Nevertheless, thank you for your help!
1 Like
You can use, object-fit: cover;
If will make your image cover the full area.
1 Like
