Images in Posts lose aspect ratio in Responsive views

[LorenAmelang]

Images on the Index page always maintain their aspect ratio when Responsively scaled. But when the same image is added to a content page, Responsive scaling squishes the image out of aspect. Here's the starter view of the "Cover Image" content:

It is not obvious because the particular image looks fine squished. In DevTools you can see what happens:

Looks to me like the margins used in the full-screen view of the post image don't get scaled when it is Responsively reduced. Personally I'd prefer to not have those margins anywhere, but I can't find what creates them... They don't show on the Index page:

I've found it I hack the generated index.html to add

src="data:image/svg+xml,%3csvg fill='none' viewBox='0 0 500 500' preserveAspectRatio="xMidYMid meet"

The aspect ratio is preserved - but I get only the blur image, and it is even tinier:

And I can't imagine where I'd add the preserveAspectRatio="xMidYMid meet" parameter into whatever part of the system generates that html! Adding that one parameter to index.html on my actual web server is the only change, the prepared image formats are identical:

Actually, the preserveAspectRatio parameter does not appear in DevTools! But its effects do... Searching for "viewBox" highlights the code for the image area - I don't understand what it has changed to work this magic...

Would definitely appreciate help! Or an explanation of which level of the code structure I should be reporting this to - Gridsome? Bulma? SVG? Some particular plugin?

[calebanthony]

This is a Bulma "issue" that I have baked into the theme.
You can see the various image options in Bulma here.

I have opted to use the is-16by9 helper on all images in the theme, which automatically resizes the container the image is in which stretches the image. The reason it appears that it works on the home page (it doesn't actually, it's still squishing the image) is because of the way the .card-image class works with Bulma.

So to get things working the way you want, it looks like there's a couple things you can do to edit the theme:

1. Remove is-16by9 in the src/components/PostCard.vue file as well as in the src/templates/Post.vue file.
2. In src/templates/Post.vue I'm wrapping the <g-image /> component in a <figure>. You can change this to instead be <div class="has-text-centered"> to still center the image but remove the margin so it stretches to the edges on mobile.

Let me know if that gets you to where you want to be!

[LorenAmelang]

Thank you Caleb!

When I just changed the class for the whole div, I lost all the text styling I'd added to PostMeta.vue, and it stopped interpreting the HTML styling included in my post text (parts of this content are recycled from many years ago.) So I added a new div just for the image:

   <div class="has-text-centered">
      <g-image
        alt="Cover image"
        :src="$page.post.cover_image"
      />
    </div>

    <div class="post content section container">
      <p v-html="$page.post.content" />
      <footer>
        <PostTags :post="$page.post" />
      </footer>
    </div>

And it works! Thanks so much for pointing me to the magic I needed.