feat(gatsby-transformer-sharp): add inside and outside fit options

docs/docs/gatsby-image.md

@@ -129,7 +129,7 @@ file(relativePath: { eq: "images/default.jpg" }) {
 }
 ```
 
-Read more in the [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/?=#fixed) README.
+Read more about fixed image queries in the [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/#fixed) README.
 
 ### Images that stretch across a _fluid_ container
 
@@ -177,18 +177,17 @@ In a query, you can specify options for fluid images.
 - `maxHeight`(int)
 - `quality` (int, default: 50)
 - `srcSetBreakpoints` (array of int, default: [])
-- `fit` (string, default: `[sharp.fit.cover][6]`)
 - `background` (string, default: `rgba(0,0,0,1)`)
 
 #### Returns
 
 - `base64` (string)
-- `src` (string)
-- `width` (int)
-- `height` (int)
 - `aspectRatio` (float)
 - `src` (string)
 - `srcSet` (string)
+- `srcSetType` (string)
+- `sizes` (string)
+- `originalImg` (string)
 
 This is where fragments like `GatsbyImageSharpFluid` come in handy, as they'll return all the above items in one line without having to type them all out:
 
@@ -204,7 +203,7 @@ file(relativePath: { eq: "images/default.jpg" }) {
 }
 ```
 
-Read more in the [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/?=#fluid) README.
+Read more about fluid image queries in the [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/#fluid) README.
 
 ### Resized images
 
@@ -240,15 +239,19 @@ allImageSharp {
 }
 ```
 
+Read more about resized image queries in the [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/#resize) README.
+
 ### Shared query parameters
 
-In addition to `gatsby-plugin-sharp` settings in `gatsby-config.js`, there are additional query options that apply to both _fluid_ and _fixed_ images:
+In addition to `gatsby-plugin-sharp` settings in `gatsby-config.js`, there are additional query options that apply to _fluid_, _fixed_, and _resized_ images:
 
-- `grayscale` (bool, default: false)
-- `duotone` (bool|obj, default: false)
-- `toFormat` (string, default: \`\`)
-- `cropFocus` (string, default: `[sharp.strategy.attention][6]`)
-- `pngCompressionSpeed` (int, default: 4)
+- [`grayscale`](/packages/gatsby-plugin-sharp/#grayscale) (bool, default: false)
+- [`duotone`](/packages/gatsby-plugin-sharp/#duotone) (bool|obj, default: false)
+- [`toFormat`](/packages/gatsby-plugin-sharp/#toformat) (string, default: \`\`)
+- [`cropFocus`](/packages/gatsby-plugin-sharp/#cropfocus) (string, default: `ATTENTION`)
+- [`fit`](/packages/gatsby-plugin-sharp/#fit) (string, default: `COVER`)
+- [`pngCompressionSpeed`](/packages/gatsby-plugin-sharp/#pngcompressionspeed) (int, default: 4)
+- [`rotate`](/packages/gatsby-plugin-sharp/#rotate) (int, default: 0)
 
 Here's an example of using the `duotone` option with a fixed image:
 
@@ -284,13 +287,13 @@ fixed(
   </figcaption>
 </figure>
 
-Read more in the [`gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp) README.
+Read more about shared image query parameters in the [`gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp/#shared-options) README.
 
 ## Image query fragments
 
 GraphQL includes a concept called "query fragments", which are a part of a query that can be reused. To ease building with `gatsby-image`, Gatsby image processing plugins which support `gatsby-image` ship with fragments which you can easily include in your queries.
 
-> Note: using fragments in your queries depends on which data source(s) you have configured. Read more in the [gatsby-image](/packages/gatsby-image#fragments) README.
+> Note: using fragments in your queries depends on which data source(s) you have configured. Read more about image query fragments in the [gatsby-image](/packages/gatsby-image/#fragments) README.
 
 ### Common fragments with `gatsby-transformer-sharp`
 
@@ -366,7 +369,7 @@ After you've made a query, you can pass additional options to the gatsby-image c
 | `onStartLoad`          | `func`              | A callback that is called when the full-size image starts loading, it gets the parameter `{ wasCached: <boolean> }` provided. |
 | `onError`              | `func`              | A callback that is called when the image fails to load.                                                                       |
 | `Tag`                  | `string`            | Which HTML tag to use for wrapping elements. Defaults to `div`.                                                               |
-| `objectFit`            | `string`            | Passed to the `object-fit-images` polyfill when importing from `gatsby-image/withIEPolyfill`. Defaults to `cover`.            |
+| `objectFit`            | `string`            | Passed to the `object-fit-images` polyfill when importing from `gatsby-image/withIEPolyfill`. Defaults to `contain`.          |
 | `objectPosition`       | `string`            | Passed to the `object-fit-images` polyfill when importing from `gatsby-image/withIEPolyfill`. Defaults to `50% 50%`.          |
 | `loading`              | `string`            | Set the browser's native lazy loading attribute. One of `lazy`, `eager` or `auto`. Defaults to `lazy`.                        |
 | `critical`             | `bool`              | Opt-out of lazy-loading behavior. Defaults to `false`. Deprecated, use `loading` instead.                                     |

e2e-tests/gatsby-image/cypress/integration/image.js

@@ -79,7 +79,7 @@ describe(`Production gatsby-image`, () => {
           `left: 0px`,
           `width: 100%`,
           `height: 100%`,
-          `object-fit: cover`,
+          `object-fit: contain`,
         ])
       })
   })

packages/gatsby-image/README.md

@@ -404,7 +404,7 @@ While you could achieve a similar effect with plain CSS media queries, `gatsby-i
 | `onStartLoad`          | `func`              | A callback that is called when the full-size image starts loading, it gets the parameter { wasCached: boolean } provided.                     |
 | `onError`              | `func`              | A callback that is called when the image fails to load.                                                                                       |
 | `Tag`                  | `string`            | Which HTML tag to use for wrapping elements. Defaults to `div`.                                                                               |
-| `objectFit`            | `string`            | Passed to the `object-fit-images` polyfill when importing from `gatsby-image/withIEPolyfill`. Defaults to `cover`.                            |
+| `objectFit`            | `string`            | Passed to the `object-fit-images` polyfill when importing from `gatsby-image/withIEPolyfill`. Defaults to `contain`.                          |
 | `objectPosition`       | `string`            | Passed to the `object-fit-images` polyfill when importing from `gatsby-image/withIEPolyfill`. Defaults to `50% 50%`.                          |
 | `loading`              | `string`            | Set the browser's native lazy loading attribute. One of `lazy`, `eager` or `auto`. Defaults to `lazy`.                                        |
 | `critical`             | `bool`              | Opt-out of lazy-loading behavior. Defaults to `false`. Deprecated, use `loading` instead.                                                     |

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

@@ -14,7 +14,7 @@ exports[`<Image /> should have a transition-delay of 1sec 1`] = `
       alt=""
       class="placeholder"
       src="string_of_base64"
-      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 1000ms; color: red;"
+      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 1; transition-delay: 1000ms; color: red;"
       title="Title for the image"
     />
     <picture>
@@ -34,13 +34,13 @@ exports[`<Image /> should have a transition-delay of 1sec 1`] = `
         loading="lazy"
         src="test_image.jpg"
         srcset="some srcSet"
-        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1000ms;"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity 1000ms;"
         title="Title for the image"
         width="100"
       />
     </picture>
     <noscript>
-      &lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" /&gt;&lt;source srcset="some srcSet" /&gt;&lt;img loading="lazy" width="100" height="100" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
+      &lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" /&gt;&lt;source srcset="some srcSet" /&gt;&lt;img loading="lazy" width="100" height="100" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:contain;object-position:center"/&gt;&lt;/picture&gt;
     </noscript>
   </div>
 </div>
@@ -60,7 +60,7 @@ exports[`<Image /> should render fixed size images 1`] = `
       alt=""
       class="placeholder"
       src="string_of_base64"
-      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 500ms; color: red;"
+      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 1; transition-delay: 500ms; color: red;"
       title="Title for the image"
     />
     <picture>
@@ -80,13 +80,13 @@ exports[`<Image /> should render fixed size images 1`] = `
         loading="lazy"
         src="test_image.jpg"
         srcset="some srcSet"
-        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 500ms;"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity 500ms;"
         title="Title for the image"
         width="100"
       />
     </picture>
     <noscript>
-      &lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" /&gt;&lt;source srcset="some srcSet" /&gt;&lt;img loading="lazy" width="100" height="100" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
+      &lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" /&gt;&lt;source srcset="some srcSet" /&gt;&lt;img loading="lazy" width="100" height="100" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:contain;object-position:center"/&gt;&lt;/picture&gt;
     </noscript>
   </div>
 </div>
@@ -109,7 +109,7 @@ exports[`<Image /> should render fluid images 1`] = `
       alt=""
       class="placeholder"
       src="string_of_base64"
-      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 500ms; color: red;"
+      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 1; transition-delay: 500ms; color: red;"
       title="Title for the image"
     />
     <picture>
@@ -131,12 +131,12 @@ exports[`<Image /> should render fluid images 1`] = `
         sizes="(max-width: 600px) 100vw, 600px"
         src="test_image.jpg"
         srcset="some srcSet"
-        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 500ms;"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity 500ms;"
         title="Title for the image"
       />
     </picture>
     <noscript>
-      &lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source srcset="some srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img loading="lazy" sizes="(max-width: 600px) 100vw, 600px" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
+      &lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source srcset="some srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img loading="lazy" sizes="(max-width: 600px) 100vw, 600px" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:contain;object-position:center"/&gt;&lt;/picture&gt;
     </noscript>
   </div>
 </div>
@@ -164,7 +164,7 @@ exports[`<Image /> should render multiple fixed image variants 1`] = `
         alt=""
         class="placeholder"
         src="other_string_of_base64"
-        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 500ms; color: red;"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 1; transition-delay: 500ms; color: red;"
         title="Title for the image"
       />
     </picture>
@@ -193,13 +193,13 @@ exports[`<Image /> should render multiple fixed image variants 1`] = `
         loading="lazy"
         src="test_image_2.jpg"
         srcset="some other srcSet"
-        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 500ms;"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity 500ms;"
         title="Title for the image"
         width="100"
       />
     </picture>
     <noscript>
-      &lt;picture&gt;&lt;source type='image/webp' media="only screen and (min-width: 768px)" srcset="some other srcSetWebp" /&gt;&lt;source media="only screen and (min-width: 768px)" srcset="some other srcSet" /&gt;&lt;source type='image/webp' srcset="some srcSetWebp" /&gt;&lt;source srcset="some srcSet" /&gt;&lt;img loading="lazy" width="100" height="100" srcset="some other srcSet" src="test_image_2.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
+      &lt;picture&gt;&lt;source type='image/webp' media="only screen and (min-width: 768px)" srcset="some other srcSetWebp" /&gt;&lt;source media="only screen and (min-width: 768px)" srcset="some other srcSet" /&gt;&lt;source type='image/webp' srcset="some srcSetWebp" /&gt;&lt;source srcset="some srcSet" /&gt;&lt;img loading="lazy" width="100" height="100" srcset="some other srcSet" src="test_image_2.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:contain;object-position:center"/&gt;&lt;/picture&gt;
     </noscript>
   </div>
 </div>
@@ -230,7 +230,7 @@ exports[`<Image /> should render multiple fluid image variants 1`] = `
         alt=""
         class="placeholder"
         src="string_of_base64"
-        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 500ms; color: red;"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 1; transition-delay: 500ms; color: red;"
         title="Title for the image"
       />
     </picture>
@@ -263,12 +263,12 @@ exports[`<Image /> should render multiple fluid image variants 1`] = `
         sizes="(max-width: 600px) 100vw, 600px"
         src="test_image_2.jpg"
         srcset="some other srcSet"
-        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 500ms;"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity 500ms;"
         title="Title for the image"
       />
     </picture>
     <noscript>
-      &lt;picture&gt;&lt;source type='image/webp' media="only screen and (min-width: 768px)" srcset="some other srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source media="only screen and (min-width: 768px)" srcset="some other srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source type='image/webp' srcset="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source srcset="some srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img loading="lazy" sizes="(max-width: 600px) 100vw, 600px" srcset="some other srcSet" src="test_image_2.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
+      &lt;picture&gt;&lt;source type='image/webp' media="only screen and (min-width: 768px)" srcset="some other srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source media="only screen and (min-width: 768px)" srcset="some other srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source type='image/webp' srcset="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source srcset="some srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img loading="lazy" sizes="(max-width: 600px) 100vw, 600px" srcset="some other srcSet" src="test_image_2.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:contain;object-position:center"/&gt;&lt;/picture&gt;
     </noscript>
   </div>
 </div>

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

@@ -158,7 +158,7 @@ describe(`<Image />`, () => {
     )
     // No Intersection Observer in JSDOM, so placeholder img will be visible (opacity 1) by default
     expect(placeholderImageTag.getAttribute(`style`)).toEqual(
-      `position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 500ms; color: red;`
+      `position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 1; transition-delay: 500ms; color: red;`
     )
     expect(placeholderImageTag.getAttribute(`class`)).toEqual(`placeholder`)
   })

packages/gatsby-image/src/index.js

@@ -214,7 +214,7 @@ const noscriptImg = props => {
 
   const sources = generateNoscriptSources(props.imageVariants)
 
-  return `<picture>${sources}<img ${loading}${width}${height}${sizes}${srcSet}${src}${alt}${title}${crossOrigin}${draggable}style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture>`
+  return `<picture>${sources}<img ${loading}${width}${height}${sizes}${srcSet}${src}${alt}${title}${crossOrigin}${draggable}style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:contain;object-position:center"/></picture>`
 }
 
 // Earlier versions of gatsby-image during the 2.x cycle did not wrap
@@ -263,7 +263,7 @@ const Img = React.forwardRef((props, ref) => {
         left: 0,
         width: `100%`,
         height: `100%`,
-        objectFit: `cover`,
+        objectFit: `contain`,
         objectPosition: `center`,
         ...style,
       }}