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

packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap

@@ -107,11 +107,11 @@ exports[`<Image /> should render fluid images 1`] = `
     <div
       aria-hidden="true"
       style="width: 100%; padding-bottom: 66.66666666666667%;"
+      title="Title for the image"
     />
     <div
       aria-hidden="true"
       style="background-color: lightgray; position: absolute; top: 0px; bottom: 0px; opacity: 1; right: 0px; left: 0px; transition-delay: 500ms;"
-      title="Title for the image"
     />
     <img
       alt=""
@@ -227,11 +227,11 @@ exports[`<Image /> should render multiple fluid image variants 1`] = `
     <div
       aria-hidden="true"
       style="width: 100%; padding-bottom: 50%;"
+      title="Title for the image"
     />
     <div
       aria-hidden="true"
       style="background-color: lightgray; position: absolute; top: 0px; bottom: 0px; opacity: 1; right: 0px; left: 0px; transition-delay: 500ms;"
-      title="Title for the image"
     />
     <picture>
       <source

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}
@@ -488,6 +490,7 @@ class Image extends React.Component {
           {/* Preserve the aspect ratio. */}
           <Tag
             aria-hidden
+            title={title}
             style={{
               width: `100%`,
               paddingBottom: `${100 / image.aspectRatio}%`,
@@ -498,7 +501,6 @@ class Image extends React.Component {
           {bgColor && (
             <Tag
               aria-hidden
-              title={title}
               style={{
                 backgroundColor: bgColor,
                 position: `absolute`,
@@ -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:

packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap

@@ -28,6 +28,8 @@ Object {
   "aspectRatio": 1,
   "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAACXBIWXMAAAPoAAAD6AG1e1JrAAABk0lEQVQ4y7VUy07DMBDsf9IDhcauaVM4IajUIuALOFRI/R24wB8AgkpInJKI9ME5zDi24rx5HjZKvOP17Hg2neh8nNjo8CGESGL7sbpwMvrlaepriF4J3dQLMlsXvzbVFCKHLJ3J8+5PRxqlF0OzleFLkSG7Xrp4faiyRaI/Lgs13QhNVB5uCUyUTDyUloidvkjezvyMEB8B4uZkqAHCiR44bYtCcecSirD5XQDmIGzVjOrEiJo4fhvY2jWTG3C6g/TLmZ+8VwEJekWy20+loUSzA5kDp15BKJmXhmD6Iqcjtep5eSArk0ZQPPpqPNAaWiBpbKt0pLgEU2xuIOewTh7rmFWFRH9/M78uaG8yNuox4oYbbrQEhaI4HKEh7mvfS2OE98WR0r6P26zj2ofW5rWowlzY2WduAQxZ14odmNZuMWA0h6wo5pplDxj+MrgnqDM3W32E/QYNxaxN2f7ztNx6qWUCOC3H+F/Y35EU2XCw3QkGhBrHX/WXLbwG4wewoAwMst84t/0jH4ZG36DFLv9m7E/1HjvIa/canAAAAABJRU5ErkJggg==",
   "density": 72,
+  "maxHeight": "100px",
+  "maxWidth": "100px",
   "originalImg": "/static/1234/df2e1/test.png",
   "originalName": "test.png",
   "presentationHeight": 100,
@@ -546,6 +548,8 @@ Object {
   "aspectRatio": 1,
   "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsSAAALEgHS3X78AAABKklEQVQ4y8WUy07DMBBFrwMpr4aybjepUeqIFd/CAgmJsuIHgWXVL+Gx4C3xCdQJnpm0UDJNAQnVuouMM8dzY4+DcoA/C/8Fe9bv4ABMMpQOZc5yFPqfwEUQY499jHoY9/BsKQyTRTNMyzu8WAwTbBnI2DY438XbPr0qFsFCvlrkMTERYFgRL3HYUvh5OMdpQqkbBtPC9NDiINQPCZM6LGVvUzIpwNch4V5EGxHS/DeYtjfHZbcyXB8yGfaPimcafLEMHqmw2L5OsWkUUuY6Ee5V28WUP25TXjwPS3iWUFnfcFQPFna98rlmSGL4IOZucQvgT76Po53qeOTYTtp4qpFKe/qM29PhJsVVl3SXsluntLfS7rPvn10MP1Aau+lKBuA9I/kV/AyW6gNTIWTuA/r8lQAAAABJRU5ErkJggg==",
   "density": 72,
+  "maxHeight": "800px",
+  "maxWidth": "800px",
   "originalImg": "/static/1234/7e516/test.png",
   "originalName": "test.png",
   "presentationHeight": 100,
@@ -563,6 +567,8 @@ Object {
   "aspectRatio": 1,
   "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsSAAALEgHS3X78AAABKklEQVQ4y8WUy07DMBBFrwMpr4aybjepUeqIFd/CAgmJsuIHgWXVL+Gx4C3xCdQJnpm0UDJNAQnVuouMM8dzY4+DcoA/C/8Fe9bv4ABMMpQOZc5yFPqfwEUQY499jHoY9/BsKQyTRTNMyzu8WAwTbBnI2DY438XbPr0qFsFCvlrkMTERYFgRL3HYUvh5OMdpQqkbBtPC9NDiINQPCZM6LGVvUzIpwNch4V5EGxHS/DeYtjfHZbcyXB8yGfaPimcafLEMHqmw2L5OsWkUUuY6Ee5V28WUP25TXjwPS3iWUFnfcFQPFna98rlmSGL4IOZucQvgT76Po53qeOTYTtp4qpFKe/qM29PhJsVVl3SXsluntLfS7rPvn10MP1Aau+lKBuA9I/kV/AyW6gNTIWTuA/r8lQAAAABJRU5ErkJggg==",
   "density": 72,
+  "maxHeight": "800px",
+  "maxWidth": "800px",
   "originalImg": "/static/1234/7e516/test.png",
   "originalName": "test.png",
   "presentationHeight": 100,
@@ -1068,6 +1074,8 @@ Object {
   "aspectRatio": 1,
   "base64": undefined,
   "density": 72,
+  "maxHeight": "100px",
+  "maxWidth": "100px",
   "originalImg": "/static/1234/7e516/test.png",
   "originalName": "test.png",
   "presentationHeight": 100,

packages/gatsby-plugin-sharp/src/index.js

@@ -614,18 +614,27 @@ async function fluid({ file, args = {}, reporter, cache }) {
     }
   }
 
+  // when using maxHeight and/or maxWidth determine appropriate aspect ratios
+  if (!options.aspectRatio) {
+    options.aspectRatio = presentationWidth / presentationHeight
+  }
+
   return {
     base64: base64Image && base64Image.src,
     aspectRatio: images[0].aspectRatio,
     src: fallbackSrc,
     srcSet,
     srcSetType,
     sizes: options.sizes,
-    originalImg: originalImg,
-    originalName: originalName,
+    originalImg,
+    originalName,
     density,
     presentationWidth,
     presentationHeight,
+    // Only return maxWidth & maxHeight when maxHeight is being queried. This way we don't change behaviour
+    // TODO fix gatsby v3
+    maxWidth: fixedDimension === `maxHeight` ? presentationWidth : null,
+    maxHeight: fixedDimension === `maxHeight` ? presentationHeight : null,
     tracedSVG,
   }
 }

packages/gatsby-transformer-sharp/src/customize-schema.js

@@ -272,6 +272,8 @@ const fluidNodeType = ({
         originalName: { type: GraphQLString },
         presentationWidth: { type: GraphQLInt },
         presentationHeight: { type: GraphQLInt },
+        maxWidth: { type: GraphQLInt },
+        maxHeight: { type: GraphQLInt },
       },
     }),
     args: {

packages/gatsby-transformer-sharp/src/fragments.js

@@ -109,6 +109,8 @@ export const GatsbyImageSharpFluid = graphql`
   fragment GatsbyImageSharpFluid on ImageSharpFluid {
     base64
     aspectRatio
+    maxHeight
+    maxWidth
     src
     srcSet
     sizes
@@ -123,6 +125,8 @@ export const GatsbyImageSharpFluid_tracedSVG = graphql`
   fragment GatsbyImageSharpFluid_tracedSVG on ImageSharpFluid {
     tracedSVG
     aspectRatio
+    maxHeight
+    maxWidth
     src
     srcSet
     sizes
@@ -137,6 +141,8 @@ export const GatsbyImageSharpFluid_withWebp = graphql`
   fragment GatsbyImageSharpFluid_withWebp on ImageSharpFluid {
     base64
     aspectRatio
+    maxHeight
+    maxWidth
     src
     srcSet
     srcWebp
@@ -153,6 +159,8 @@ export const GatsbyImageSharpFluid_withWebp_tracedSVG = graphql`
   fragment GatsbyImageSharpFluid_withWebp_tracedSVG on ImageSharpFluid {
     tracedSVG
     aspectRatio
+    maxHeight
+    maxWidth
     src
     srcSet
     srcWebp
@@ -168,6 +176,8 @@ export const GatsbyImageSharpFluid_withWebp_tracedSVG = graphql`
 export const GatsbyImageSharpFluid_noBase64 = graphql`
   fragment GatsbyImageSharpFluid_noBase64 on ImageSharpFluid {
     aspectRatio
+    maxHeight
+    maxWidth
     src
     srcSet
     sizes
@@ -181,6 +191,8 @@ export const GatsbyImageSharpFluid_noBase64 = graphql`
 export const GatsbyImageSharpFluid_withWebp_noBase64 = graphql`
   fragment GatsbyImageSharpFluid_withWebp_noBase64 on ImageSharpFluid {
     aspectRatio
+    maxHeight
+    maxWidth
     src
     srcSet
     srcWebp