fix(gatsby-plugin-image): Apply object-fit and object-position to pla…

…ceholder (#30894) (#30944) (cherry picked from commit 8affcf5) Co-authored-by: Matt Kane <matt@gatsbyjs.com>
gatsbyjs · Apr 19, 2021 · 2ee989c · 2ee989c
1 parent ef8feae
commit 2ee989c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 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
@@ -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
@@ -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
@@ -60,7 +60,9 @@ export function lazyHydrate(
           layout,
           width,
           height,
-          wrapperBackgroundColor
+          wrapperBackgroundColor,
+          objectFit,
+          objectPosition
         )}
       />