From 2ee989c3cbc8323b1e2aaa228221d44aa7d6978e Mon Sep 17 00:00:00 2001
From: GatsbyJS Bot <mathews.kyle+gatsbybot@gmail.com>
Date: Mon, 19 Apr 2021 15:59:31 -0400
Subject: [PATCH] fix(gatsby-plugin-image): Apply object-fit and
 object-position to placeholder (#30894) (#30944)

(cherry picked from commit 8affcf5fde3b6c31ce9527957f9758e9bfb0fa5c)

Co-authored-by: Matt Kane <matt@gatsbyjs.com>
---
 .../src/components/gatsby-image.server.tsx            |  4 +++-
 packages/gatsby-plugin-image/src/components/hooks.ts  | 11 ++++++++++-
 .../src/components/lazy-hydrate.tsx                   |  4 +++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
index 98db31d7677ed..d37fcaff1c7e6 100644
--- a/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
+++ b/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
@@ -105,7 +105,9 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
             layout,
             width,
             height,
-            placeholderBackgroundColor
+            placeholderBackgroundColor,
+            objectFit,
+            objectPosition
           )}
         />
 
diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts
index e827e1815d3ed..54f9afd3a9e4f 100644
--- a/packages/gatsby-plugin-image/src/components/hooks.ts
+++ b/packages/gatsby-plugin-image/src/components/hooks.ts
@@ -312,7 +312,9 @@ export function getPlaceholderProps(
   layout: Layout,
   width?: number,
   height?: number,
-  backgroundColor?: string
+  backgroundColor?: string,
+  objectFit?: CSSProperties["objectFit"],
+  objectPosition?: CSSProperties["objectPosition"]
 ): PlaceholderImageAttrs {
   const wrapperStyle: CSSProperties = {}
 
@@ -339,6 +341,13 @@ export function getPlaceholderProps(
     }
   }
 
+  if (objectFit) {
+    wrapperStyle.objectFit = objectFit
+  }
+
+  if (objectPosition) {
+    wrapperStyle.objectPosition = objectPosition
+  }
   const result: PlaceholderImageAttrs = {
     ...placeholder,
     "aria-hidden": true,
diff --git a/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx b/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx
index f10518f7b5ac0..5849936a2f199 100644
--- a/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx
+++ b/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx
@@ -60,7 +60,9 @@ export function lazyHydrate(
           layout,
           width,
           height,
-          wrapperBackgroundColor
+          wrapperBackgroundColor,
+          objectFit,
+          objectPosition
         )}
       />