fix(gatsby-image): Fix fluid not respecting maxWidth/maxHeight (#17006)

gatsbyjs · May 6, 2020 · ad7cd6b · ad7cd6b
1 parent b9836da
commit ad7cd6b
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 30 deletions.
diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md
@@ -225,6 +225,7 @@ Their fragments are:
 - `GatsbyImageSharpFluid_withWebp`
 - `GatsbyImageSharpFluid_withWebp_noBase64`
 - `GatsbyImageSharpFluid_withWebp_tracedSVG`
+- `GatsbyImageSharpFluidLimitPresentationSize`
 
 ### gatsby-source-contentful
 
@@ -318,37 +319,16 @@ prop. e.g. `<Img fluid={fluid} />`
 ### Avoiding stretched images using the fluid type
 
 As mentioned previously, images using the _fluid_ type are stretched to
-match the container's width. In the case where the image's width is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.
+match the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.
 
-To counter this edge case one could wrap the _Img_ component in order to set a better, for that case, `maxWidth`:
-
-```jsx
-const NonStretchedImage = props => {
-  let normalizedProps = props
-  if (props.fluid && props.fluid.presentationWidth) {
-    normalizedProps = {
-      ...props,
-      style: {
-        ...(props.style || {}),
-        maxWidth: props.fluid.presentationWidth,
-        margin: "0 auto", // Used to center the image
-      },
-    }
-  }
-
-  return <Img {...normalizedProps} />
-}
-```
-
-**Note:** The `GatsbyImageSharpFluid` fragment does not include `presentationWidth`.
-You will need to add it in your graphql query as is shown in the following snippet:
+To counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.
 
 ```graphql
 {
   childImageSharp {
     fluid(maxWidth: 500, quality: 100) {
       ...GatsbyImageSharpFluid
-      presentationWidth
+      ...GatsbyImageSharpFluidLimitPresentationSize
     }
   }
 }

diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js
@@ -81,8 +81,8 @@ const getImageSrcKey = ({ fluid, fixed }) => {
 
 /**
  * Returns the current src - Preferably with art-direction support.
- * @param currentData  {{media?: string}[]}   The fluid or fixed image array.
- * @return {{src: string, media?: string}}
+ * @param currentData  {{media?: string}[], maxWidth?: Number, maxHeight?: Number}   The fluid or fixed image array.
+ * @return {{src: string, media?: string, maxWidth?: Number, maxHeight?: Number}}
  */
 const getCurrentSrcData = currentData => {
   if (isBrowser && hasArtDirectionSupport(currentData)) {
@@ -480,6 +480,8 @@ class Image extends React.Component {
           style={{
             position: `relative`,
             overflow: `hidden`,
+            maxWidth: image.maxWidth ? `${image.maxWidth}px` : null,
+            maxHeight: image.maxHeight ? `${image.maxHeight}px` : null,
             ...style,
           }}
           ref={this.handleRef}
@@ -717,6 +719,8 @@ const fluidObject = PropTypes.shape({
   srcWebp: PropTypes.string,
   srcSetWebp: PropTypes.string,
   media: PropTypes.string,
+  maxWidth: PropTypes.number,
+  maxHeight: PropTypes.number,
 })
 
 // If you modify these propTypes, please don't forget to update following files as well:

diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js
@@ -621,8 +621,8 @@ async function fluid({ file, args = {}, reporter, cache }) {
     srcSet,
     srcSetType,
     sizes: options.sizes,
-    originalImg: originalImg,
-    originalName: originalName,
+    originalImg,
+    originalName,
     density,
     presentationWidth,
     presentationHeight,

diff --git a/packages/gatsby-transformer-sharp/src/customize-schema.js b/packages/gatsby-transformer-sharp/src/customize-schema.js
@@ -270,8 +270,8 @@ const fluidNodeType = ({
         sizes: { type: new GraphQLNonNull(GraphQLString) },
         originalImg: { type: GraphQLString },
         originalName: { type: GraphQLString },
-        presentationWidth: { type: GraphQLInt },
-        presentationHeight: { type: GraphQLInt },
+        presentationWidth: { type: new GraphQLNonNull(GraphQLInt) },
+        presentationHeight: { type: new GraphQLNonNull(GraphQLInt) },
       },
     }),
     args: {

diff --git a/packages/gatsby-transformer-sharp/src/fragments.js b/packages/gatsby-transformer-sharp/src/fragments.js
@@ -115,6 +115,17 @@ export const GatsbyImageSharpFluid = graphql`
   }
 `
 
+/**
+ * Presentation sizes to make sure a fluid container does not overflow
+ * @type {Fragment}
+ */
+export const GatsbyImageSharpFluidLimitPresentationSize = graphql`
+  fragment GatsbyImageSharpFluidLimitPresentationSize on ImageSharpFluid {
+    maxHeight: presentationHeight
+    maxWidth: presentationWidth
+  }
+`
+
 /**
  * Traced SVG fluid images
  * @type {Fragment}