gatsby-image fluid not respecting maxHeight

[JaKXz]

Description

When I use the fluid function and specify a maxHeight value, it doesn't stick to that size. However, when I use the fixed version of the following, everything renders just fine. I have tried gatsby clean, gatsby build, and gatsby serve as well as re-installing all my node_modules. I'm not sure if this issue is related to #14988 but I didn't want to comment on it if they are separate issues... but I apologize for duplicating if they are not.

@t2ca#1075 has also been kind enough to help me on discord but we haven't had any luck in the troubleshooting we did. I've done a search through the issues as best I can but I didn't find much in the short time I spent.

Steps to reproduce

import React from "react";
import { graphql, StaticQuery } from "gatsby";
import Img from "gatsby-image";

export default function MyImage() {
  return (
    <StaticQuery
      query={graphql`
        query {
          logoImage: file(relativePath: { eq: "paddle.png" }) {
            childImageSharp {
              fluid(maxHeight: 35) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      `}
      render={data => <Img fluid={data.logoImage.childImageSharp.fluid} />}
    />
  );
}

Expected result

I should see a fluid image with a maxHeight as specified.

Actual result

An image that is too large is rendered. I see no errors in the console.

Environment

  System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 5.7.1 - /usr/local/bin/zsh
  Binaries:
    Node: 12.4.0 - /usr/local/bin/node
    Yarn: 1.17.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 75.0.3770.100
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.10.5 => 2.10.5 
    gatsby-image: ^2.2.3 => 2.2.3 
    gatsby-plugin-create-client-paths: ^2.1.1 => 2.1.1 
    gatsby-plugin-manifest: ^2.2.0 => 2.2.0 
    gatsby-plugin-offline: ^2.2.0 => 2.2.0 
    gatsby-plugin-react-helmet: ^3.1.0 => 3.1.0 
    gatsby-plugin-sharp: ^2.2.1 => 2.2.1 
    gatsby-plugin-styled-components: ^3.1.0 => 3.1.0 
    gatsby-source-filesystem: ^2.1.1 => 2.1.1 
    gatsby-transformer-sharp: ^2.2.0 => 2.2.0 

[JaKXz]

I have minimally reproduced this issue here: https://github.com/JaKXz/gatsby-client-paths-issue/commit/3a0eba5af1d1ca1827f0a812de5894a1d5540a41

git clone https://github.com/JaKXz/gatsby-client-paths-issue
yarn
yarn start
open http://localhost:8000

These are the results:

cc @wardpeet - am I just misunderstanding how these packages work?

[JaKXz]

I've updated the issue to focus on the maxHeight issue - should it be possible to specify maxHeight alone?

[KyleAMathews]

Have you put height limits on its container? Fluid images are for fluid containers — but the container needs a maxHeight in addition to the image. The reason the graphql arg is called maxHeight and maxWidth is to mimic the CSS properties you need to set on the surrounding block element.

[JaKXz]

@KyleAMathews check out my example repo - unless I'm missing something very obvious, I think my screenshot demonstrates that the containing div does have a max-height set.

[KyleAMathews]

Ah ok :-D Didn't look.

Yeah, it very well could be broken. It's used far far less (maybe not at all?) than maxWidth.

Are you interested in looking into a fix in gatsby-image? Would love you help!

[JaKXz]

I would love to help but I don't have the cycles right now unfortunately. Is there any other way I can help get this prioritized as a bug fix or is it just up to fate? Maybe it would be a good first issue for someone? :)

[KyleAMathews]

The best way you could help move this forward is to spend some time investigating what gatsby-image outputs to see why it isn't respecting heights. If there's a clear description of what's wrong, that'd make it easy for someone else to come along and fix it.

[marcel0ll]

To workaround set maxHeight on to 100% and set a non-relative height on your container div

<div style={{ maxHeight: `150px`, marginBottom: `1.45rem` }}>
  <Image />
</div>

<Img fluid={data.placeholderImage.childImageSharp.fluid} style={{maxHeight: '100%'}}/>

I believe this is not directly related to gatsby-image but could be related to these links: #1 #2

As if you set this example it will also have weird behaviour, and not respect parent max-height:

<div style={{ maxHeight: `150px`, outline: '2px dashed red' }}>
  <div style={{ width: 200, height: 200, backgroundColor: "grey", outline: '2px dashed green', maxHeight: '100%' }}>A</div>
</div>

If you set height to ANY value >= 150px on parent on this example it will work as expected:

Would be glad to write a PR, but I am not sure what/how to fix

[thebrokenfinger]

@KyleAMathews I'd love to help over here. I can start working on this if you may confirm and assign it to me?

[JaKXz]

@yatharthk I think the bug has been confirmed and I am pretty sure no-one from the core team has time to take it on. If you have a solution that you can contribute I say go for it and hopefully someone will have time to review the PR!

@0tho thank you for your reply but I tried your solution and unfortunately did not have any success.

[marcel0ll]

@JaKXz could you try again with this code? The previous code was missing the mentioned height property.

// image.js
return <Img fluid={data.placeholderImage.childImageSharp.fluid} style={{maxHeight: '100%'}} imgStyle={{objectFit: 'contain'}} />

// index.js
<div style={{ maxHeight: `150px`, marginBottom: `1.45rem`, height: '200px' }}>
  <Image />
</div>

[progital]

This should help (also with #14988)

<div style={{ maxHeight: "100%", height: "45px" }}>
  <Img
    style={{ maxHeight: "100%" }}
    imgStyle={{ objectFit: "contain" }}
    fluid={data.placeholderImage.childImageSharp.fluid}
  />
</div>

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

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

[JaKXz]

Still seeing this issue - I've tried the suggestions above but they're not fixes, I think.

[ianlenehan]

Thanks @0tho and @progital that worked for me!

[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!

[JaKXz]

This issue should not be closed.

[sarthak0906]

Hello everyone,
Is this issue still open, I would like to contribute to it.
Please assign it if possible

[sbardian]

I have had a PR out there on this for awhile. See PR #17006. I have a test repo to play with the PR/etc. if anyone is interested (https://github.com/gatsbyjs/gatsby/pull/17006#issuecomment-532325735).

[onadeem1]

would this solve putting 100vh on an image? Seems to work very easily for regular images but not the gatsby images.

[onadeem1]

This should help (also with #14988)

<div style={{ maxHeight: "100%", height: "45px" }}>
  <Img
    style={{ maxHeight: "100%" }}
    imgStyle={{ objectFit: "contain" }}
    fluid={data.placeholderImage.childImageSharp.fluid}
  />
</div>

this worked pretty well, has anyone tried this as a fix?

[JaKXz]

I mentioned that I tried that solution but I don’t think it’s a fix. There is a solution in #17006 that I am using as a workaround but the correct fix imho would be the ability to specify maxHeight as a parameter in the graphql query.

[sbardian]

@JaKXz that PR does provide the ability to supply a maxHeight in the query. See examples in this comment (https://github.com/gatsbyjs/gatsby/pull/17006#issuecomment-554006861)

[JaKXz]

@sbardian correct but it’s not merged yet

[AAverin]

Propose css workaround don't take into account different screen sizes and the fact that everything should scale properly.
Hope mentioned PR takes this into account.

[JaKXz]

Thank you @sbardian! Looking forward to this release