title: Gatsby image fluid stretches to beyond the vertical size of the container
body: <p>I'm building a gatsby site to show my photographs. I want a full-screen page for each photograph, and the photo should fill out the page, but respecting the aspect ratio.</p>
  <p>The problem is that while photos shot in landscape orientation are limited correctly, photos shot in portrait orientation fill out all horizontal space but overflows the vertical space.</p>
  <p>In <a href="https://www.gatsbyjs.org/packages/gatsby-image/#avoiding-stretched-images-using-the-fluid-type" rel="nofollow noreferrer">the documentation</a> there is the statement</p>
  <blockquote>
  <p>As mentioned previously, images using the fluid type are stretched to match the container’s width and height</p>
  </blockquote>
  <p>However, my observed behavior is that it only stretches to match the width, not height.</p>
  <p>I simplified my problem into this small example, that tries to contain the images in a 400x400px container:</p>
  <pre><code>import React from &quot;react&quot;
  import { graphql } from &quot;gatsby&quot;
  import Layout from &quot;../components/layout&quot;
  import Img from &quot;gatsby-image&quot;
  
  export default (props) =&gt; {
    const { data } = props;
    return (
      &lt;Layout&gt;
        &lt;div style={{height: &quot;400px&quot;, width: &quot;400px&quot;, background: &quot;white&quot; }}&gt;
          &lt;Img fluid={ data.file.childImageSharp.fluid } /&gt;
        &lt;/div&gt;
      &lt;/Layout&gt;
    )
  }
  
  export const query = graphql`
    query($id: String!) {
      file(id: { eq: $id }) {
        childImageSharp {
          fluid(maxWidth: 500, maxHeight: 500, fit: INSIDE) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `;
  </code></pre>
  <p>In the landscape example, the image is constrained to the width of the containing div:
  <a href="https://i.stack.imgur.com/MtqVF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MtqVF.jpg" alt="Landscape example" /></a></p>
  <p>In the portrait orientation example, the image fills out the entire width of the containing div, becoming too high:</p>
  <p><a href="https://i.stack.imgur.com/7Ufqi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Ufqi.jpg" alt="Portrait orientation example" /></a></p>
  <p>How do I make Gatsby Image scale down to also be restrained to the available vertical space?</p>
  <p>p.s. the rounded corners in the example images are remnants of a bootstrap class from an older solution, but its presence did not affect the problem in question.</p>