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 = 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 )} />