Art Direction with Gatsby Image has strange behavior

[danboyle8637]

Summary

I am trying to use art-direction with Gatsby Image but for my mobile, tablet, and ipadPro images... they are not using their entire height... only the height of the content that overlays them.

See below...

Relevant information

I'm using Styled Components.

Here is my sources array:

const sources = [
    {
      ...laptopBackground,
      media: `(min-width: 1100px)`,
    },
    {
      ...ipadProBackground,
      media: `(min-width: 960px)`,
    },
    {
      ...tabletBackground,
      media: `(min-width: 600px)`,
    },
    mobileBackground,
  ];

I am using fluid images and just like the docs say... I am passing sources to the fluid prop in Gatsby Image.

My query for the image uses maxWidth, maxHeight, and quality. Nothing else.

I have content over my images using CSS Grid so they overlap using the same grid column and row. But the image's height is only as big as the content that overlays it... when you think it should be the height of the image.

Any ideas?

This works in a normal React environment using Styled Components.

The image should extend to the bottom of the screen... it's 1300 pixels tall.

[danboyle8637]

I found what seems to be a rouge div in my DOM tree with nothing in it, but styling and a padding-bottom that seems to be messing with everything.

[polarathene]

rouge div in my DOM tree with nothing in it, but styling and a padding-bottom that seems to be messing with everything.

That's to enforce the aspect ratio iirc, which is a feature of fluid images afaik(I haven't used Gatsby or worked with the gatsby-image code in a while). The issue should be reproducible without multiple sources for Art Direction?

If the issue is only from different images(with different aspect ratios), then the problem is likely due to the Art Direction feature. IIRC, the code defaults to the 1st images aspect ratio:

gatsby/packages/gatsby-image/src/index.js

Line 436 in 0da6dbb

paddingBottom: `${100 / image.aspectRatio}%`,

The remaining issues gatsby-image has to address for Art Direction are identified here.

[github-actions]

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/contribute for more information about opening PRs, triaging issues, and contributing!

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

[github-actions]

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! 💪💜