title: How to display images without cropping using gatsby-image?
body: <p>Live example (images might load slowly): <a href="https://suhadolnik-photo.surge.sh/portreti" rel="noreferrer">https://suhadolnik-photo.surge.sh/portreti</a></p>
  
  <p>I'm making a photography site with GatsbyJS and using the following template as a base site that I've been changing: <a href="https://github.com/LekoArts/gatsby-starter-portfolio-emilia" rel="noreferrer">https://github.com/LekoArts/gatsby-starter-portfolio-emilia</a></p>
  
  <p>Being really new to graphql I've run into a problem displaying images after a user clicks on the card to show the 'Portraits' subpage. The images are all displayed with a fixed width and height which I don't want. I need to display them with their native width and height, just resized to fit into the grid.</p>
  
  <p>I've tried changing the graphql query in the <code>project.js</code> file, where you set the <code>maxWidth: 1600</code> to no avail, as well as the <code>resize(width: 800)</code> further down the query. Later I found out that changing the <code>margin</code> on <code>gatsby-image-wrapper</code> through dev tools gave me the expected results, but that required changing the core <code>gatsby-image</code> plugin and having to manually change the <code>margin</code> for every image separately which isn't the solution.</p>
  
  <p><code>project.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import Img from 'gatsby-image'
  import PropTypes from 'prop-types'
  import { graphql } from 'gatsby'
  import styled from 'styled-components'
  
  import { Layout, ProjectHeader, ProjectPagination, SEO } from '../components'
  import config from '../../config/site'
  
  const BG = styled.div`
    background-color: ${props =&gt; props.theme.colors.bg};
    position: relative;
    padding: 2rem 0 0 0;
  `
  
  const OuterWrapper = styled.div`
    padding: 0 ${props =&gt; props.theme.contentPadding};
    margin: -10rem auto 0 auto;
  `
  
  const InnerWrapper = styled.div`
    position: relative;
    max-width: ${props =&gt; `${props.theme.maxWidths.project}px`};
    margin: 0 auto;
  `
  
  const Grid = styled.div`
    display: grid;
    grid-template-columns: repeat(${props =&gt; props.theme.gridColumnsProject}, 1fr);
    grid-gap: 20px;
  
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  `
  
  const Project = ({ pageContext: { slug, prev, next }, data: { project: postNode, images } }) =&gt; {
    const project = postNode.frontmatter
  
    return (
      &lt;Layout customSEO&gt;
        &lt;SEO postPath={slug} postNode={postNode} postSEO /&gt;
        &lt;ProjectHeader
          name={config.name}
          date={project.date}
          title={project.title}
          areas={project.areas}
          text={postNode.body}
        /&gt;
        &lt;BG&gt;
          &lt;OuterWrapper&gt;
            &lt;InnerWrapper&gt;
              &lt;Grid&gt;
                {images.nodes.map(image =&gt; (
                  &lt;Img
                    alt={image.name}
                    key={image.childImageSharp.fluid.src}
                    fluid={image.childImageSharp.fluid}
                    style={{ margin: '2rem 0' }}
                  /&gt;
                ))}
              &lt;/Grid&gt;
            &lt;/InnerWrapper&gt;
            &lt;ProjectPagination next={next} prev={prev} /&gt;
          &lt;/OuterWrapper&gt;
        &lt;/BG&gt;
      &lt;/Layout&gt;
    )
  }
  
  export default Project
  
  Project.propTypes = {
    pageContext: PropTypes.shape({
      slug: PropTypes.string.isRequired,
      next: PropTypes.object,
      prev: PropTypes.object,
    }),
    data: PropTypes.shape({
      project: PropTypes.object.isRequired,
      images: PropTypes.object.isRequired,
    }).isRequired,
  }
  
  Project.defaultProps = {
    pageContext: PropTypes.shape({
      next: null,
      prev: null,
    }),
  }
  
  export const pageQuery = graphql`
    query($slug: String!, $absolutePathRegex: String!) {
      images: allFile(
        filter: {
          absolutePath: { regex: $absolutePathRegex }
          extension: { regex: "/(jpg)|(png)|(tif)|(tiff)|(webp)|(jpeg)/" }
        }
        sort: { fields: name, order: ASC }
      ) {
        nodes {
          name
          childImageSharp {
            fluid(maxWidth: 1600, quality: 90) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
      project: mdx(fields: { slug: { eq: $slug } }) {
        body
        excerpt
        parent {
          ... on File {
            mtime
            birthtime
          }
        }
        frontmatter {
          cover {
            childImageSharp {
              resize(width: 800) {
                src
              }
            }
          }
          date(formatString: "DD.MM.YYYY")
          title
          areas
        }
      }
    }
  `
  </code></pre>
  
  <p><code>Card.js</code> the parent component:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import styled from 'styled-components'
  import PropTypes from 'prop-types'
  import { useSpring, animated, config } from 'react-spring'
  import { rgba } from 'polished'
  import Img from 'gatsby-image'
  import { Link } from 'gatsby'
  
  const CardItem = styled(Link)`
    min-height: 500px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: ${props =&gt; props.theme.colors.color};
    transition: all 0.3s ease-in-out;
  
    &amp;:hover {
      color: white;
      transform: translateY(-6px);
    }
  
    @media (max-width: ${props =&gt; props.theme.breakpoints.s}) {
      min-height: 300px;
    }
  `
  
  const Cover = styled.div`
    width: 100%;
    height: 100%;
    position: absolute;
  `
  
  const Content = styled.div`
    padding: 1rem;
    position: relative;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    opacity: 0;
    background: ${props =&gt; rgba(props.theme.colors.link, 0.65)};
    height: 0;
  
    ${CardItem}:hover &amp; {
      opacity: 1;
      height: 120px;
    }
  `
  
  const Bottom = styled.div`
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    div:first-child {
      margin-right: 1rem;
    }
  `
  
  const Name = styled.h2`
    margin-bottom: 0;
    margin-top: 0;
  `
  
  const Card = ({ path, cover, date, areas, title, delay }) =&gt; {
    const springProps = useSpring({
      config: config.slow,
      delay: 200 * delay,
      from: { opacity: 0, transform: 'translate3d(0, 30px, 0)' },
      to: { opacity: 1, transform: 'translate3d(0, 0, 0)' },
    })
  
    return (
      &lt;animated.div style={springProps}&gt;
        &lt;CardItem to={path}&gt;
          &lt;Cover&gt;
            &lt;Img fluid={cover} /&gt;
          &lt;/Cover&gt;
          &lt;Content&gt;
            &lt;Name&gt;{title}&lt;/Name&gt;
            &lt;Bottom&gt;
              &lt;div&gt;{date}&lt;/div&gt;
              &lt;div&gt;
                {areas.map((area, index) =&gt; (
                  &lt;React.Fragment key={area}&gt;
                    {index &gt; 0 &amp;&amp; ', '}
                    {area}
                  &lt;/React.Fragment&gt;
                ))}
              &lt;/div&gt;
            &lt;/Bottom&gt;
          &lt;/Content&gt;
        &lt;/CardItem&gt;
      &lt;/animated.div&gt;
    )
  }
  
  export default Card
  
  Card.propTypes = {
    path: PropTypes.string.isRequired,
    cover: PropTypes.object.isRequired,
    date: PropTypes.string.isRequired,
    areas: PropTypes.array.isRequired,
    title: PropTypes.string.isRequired,
    delay: PropTypes.number.isRequired,
  }
  
  </code></pre>
  
  <p>I expect the images to show in their native width and height, but resized to fit the grid. Providing visual representation below on how it looks now and what the expected result is.
  <a href="https://imgur.com/a/I0hWoHs" rel="noreferrer">Current result</a> and <a href="https://imgur.com/a/CYDO3TF" rel="noreferrer">expected result</a></p>
  
  <p>Cheers!</p>