# Ghost source theme: huge featured image

**URL:** <https://forum.ghost.org/t/ghost-source-theme-huge-featured-image/60153>\
**Category:** Themes\
**Created:** [September 16, 2025, 1:49pm UTC](https://forum.ghost.org/t/ghost-source-theme-huge-featured-image/60153 "2025-09-16T13:49:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![adriarato](https://avatars.discourse-cdn.com/v4/letter/a/ce73a5/32.png) [@adriarato](https://forum.ghost.org/u/adriarato)\
**Post date:** [September 16, 2025, 1:49pm UTC](https://forum.ghost.org/t/ghost-source-theme-huge-featured-image/60153/1 "2025-09-16T13:49:55Z")

</div>

Hello, there ! I hope you can help me. Please take into account that my experience with code is next to 0.

I’m using Ghost Pro (starter) and therefore my only option of theme is the default theme source (v1.5.0). My problem is that all my posts and pages have featured images (and I prefer it that way) but the size is just too huge. I would like to half the size for all of the featured images of the posts. If one just reduces the pixels of the images, that makes it worse because it still tries to fill the whole width of the page, and it’s horrible.

By reading this topic [Resizing Feature Image on Post / Page - #4 by Cathy\_Sarisky](https://forum.ghost.org/t/resizing-feature-image-on-post-page/40214/4) , I understood that I should include this piece of code into the code injection:

```auto
<style>
.featured-post-image {
    width: 50%;
    height: 300px;
    margin-right: auto;
    margin-left: auto;
</style>

```

This does nothing. It doesn’t change anything & when I tried to write it without the “style” bit, it just shows the code at the top of post.

Do you know a solution for this?

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [September 16, 2025, 3:10pm UTC](https://forum.ghost.org/t/ghost-source-theme-huge-featured-image/60153/2 "2025-09-16T15:10:23Z")

</div>

Hey @adriarato - most code injection is theme-specific. It’s always helpful if you link the site. Here’s a guess, based on the source demo.

```auto
<style>
@media (min-width: 768px) {
  .gh-article-image img {
    max-height: 50vh;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 50vw;
  }
}
</style>

```

You can play with the values of max-width and max-height (which I’ve got set as relative to the browser’s window), until you get the effect desired.

---

<div class="post-metadata">

**Author:** ![adriarato](https://avatars.discourse-cdn.com/v4/letter/a/ce73a5/32.png) [@adriarato](https://forum.ghost.org/u/adriarato)\
**Post date:** [September 16, 2025, 3:15pm UTC](https://forum.ghost.org/t/ghost-source-theme-huge-featured-image/60153/3 "2025-09-16T15:15:37Z")

</div>

> [@Cathy\_Sarisky](#):
>
> ```auto
> <style>
> @media (min-width: 768px) {
> .gh-article-image img {
> max-height: 50vh;
> width: auto;
> margin-left: auto;
> margin-right: auto;
> max-width: 50vw;
> }
> }
> </style>
> 
> ```

thank you so very much ! This solved it for me, as you said, I only need to adjust a little bit the height. This is my site: [Ghost](https://prosa.ghost.io/ghost/#/site) noted from my side to share it next time.

thanks again !

---

<div class="post-metadata">

**Author:** ![marcello](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@marcello](https://forum.ghost.org/u/marcello)\
**Post date:** [October 5, 2026, 4:39pm UTC](https://forum.ghost.org/t/ghost-source-theme-huge-featured-image/60153/4 "2026-10-05T16:39:12Z")

</div>

> [@Cathy\_Sarisky](#):
>
> ```auto
> <style>
> @media (min-width: 768px) {
> .gh-article-image img {
> max-height: 50vh;
> width: auto;
> margin-left: auto;
> margin-right: auto;
> max-width: 50vw;
> }
> }
> </style>
> 
> ```

Cathy to the rescue (as usual!)  
I have tried this by pasting in footer (initially) and the header (when that did not work). I am using Edition 1.0.0. This is a page on my sited with the usual enormous feature image [Autumn](https://www.marcellomancuso.ca/autumn/) . Thank you in advance.

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [October 5, 2026, 5:21pm UTC](https://forum.ghost.org/t/ghost-source-theme-huge-featured-image/60153/5 "2026-10-05T17:21:05Z")

</div>

Different theme means different code. Try this.

```auto
<style>
@media (min-width: 768px) {
  .single-media img {
    max-height: 50vh;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container-width, 720px);
  }
}
</style>

```

---

<div class="post-metadata">

**Author:** ![marcello](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@marcello](https://forum.ghost.org/u/marcello)\
**Post date:** [October 5, 2026, 6:40pm UTC](https://forum.ghost.org/t/ghost-source-theme-huge-featured-image/60153/6 "2026-10-05T18:40:28Z")

</div>

_ **Thank you!!** _ Works like a charm!