Gatsby: [gatsby-remark-images] Tall images cannot be restricted by maxHeight

[TheSonOfThomp]

Summary

Tall images cannot be restricted by maxHeight. These images end up taking the whole width of the screen and are too tall.

Basic example

Proposed API:

{
  resolve: `gatsby-remark-images`,
    options: {
      maxWidth: 640,
      maxHeight: 720,
    },
}

Motivation

I have an iPhone screenshot I want to add to my blog. I have it rendering properly, but there is no simple way to shrink it down to a reasonable size without also shrinking the wider images.

[pieh]

The maxHeight option kind of works now, but probably not in a way you would want I think. When you use maxWidth and maxHeight together today - this will force aspectRatio and crop images.

What would be needed here is support for fit: inside (from sharp options in http://sharp.pixelplumbing.com/en/stable/api-resize/#resize which won't crop/change aspect ratio - just set maximum bounds). There is work on this in progress in https://github.com/gatsbyjs/gatsby/pull/14852

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!