[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 #14852

[gatsbot]

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]

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!

[daniebker]

For anyone stumbling on this like me. My solution was to add a wrapper style to the image container to restrict it's height and add a link to a scss file in my template file to add object-fit: contain to the gatsby-resp-image-image class.

I'd love to know if there's a better solution for this now? This works for me though.

.gatsby-resp-image-image {
    object-fit: contain;
}

in gatsby-config.js

 {
            resolve: 'gatsby-remark-images',
            options: {
            ...
              wrapperStyle: () => 'max-height: 80vh;',
              backgroundColor: 'transparent'
            }
          },

If you don't also set transparent for the background color you'll also end up with a large white box surrounding your images.

[jbierfeldt]

For anyone solving this issue using @daniebker's solution, you may also run into a problem where the low-resolution placeholder gatsby-resp-image-background-image does not resize.

I've been able to temporarily fix this issue by adding the disableBgImage option to the gatsby-remark-images plugin, but this seems like more of a workaround than a solution. Does anyone have any other suggestions on how to deal with the resizing and constraining of images by height when using the gatsby-remark-images plugin with mdx?

//gatsby-config.js
{
    resolve: `gatsby-remark-images`,
    options: {
       wrapperStyle: () => 'max-height: 60vh; ',
       disableBgImage: true,
       ...
}

[davwheat]

Does anyone have any other suggestions on how to deal with the resizing and constraining of images by height when using the gatsby-remark-images plugin with mdx?

@jbierfeldt I've found that you can specify overflow: hidden along with the max height and the overflowing placeholder will no longer overflow.

Might be a little late now...

[gabrielalg]

For those who still struggling with this, I've found a pretty reasonable workaround:

//gatsby-config.js
{
  resolve: `gatsby-remark-images`,
  options: {
    maxWidth: 1000,
    wrapperStyle: image =>
      `max-width: clamp(200px, calc(${image.aspectRatio} * 80vh), 1000px);`,
  },
}

I had to configure maxWidth twice to generate the right size images. 'Clamp' is not yet supported in all browsers, but has a good global usage percentage: https://caniuse.com/?search=clamp

As a bonus, for those who, like me, wanted to limit the width OR the height (in case of portrait images), I came up with this more specific version:

//gatsby-config.js
{
  resolve: `gatsby-remark-images`,
  options: {
    maxWidth: 1000,
    wrapperStyle(image) {
      let maxImageWidth;
      if (image.aspectRatio < 1) maxImageWidth = image.aspectRatio * 1000;
      else maxImageWidth = 1000;

      return `max-width: clamp(200px, calc(${
          image.aspectRatio
        }* 80vh), ${
          Math.round(maxImageWidth * 10) / 10
        }px); max-height: 1000px;`;
      },
    },
  },
}

Hope this help someone! 😃