From 35c90f8554c59f59b75e6ad040213c717e5883a5 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Fri, 26 Mar 2021 16:47:03 +0000 Subject: [PATCH] fix(gatsby-plugin-image): Correctly calculate aspect ratio when width and height are both set (#30466) --- packages/gatsby-plugin-image/src/__tests__/image-utils.ts | 5 +++++ packages/gatsby-plugin-image/src/image-utils.ts | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/gatsby-plugin-image/src/__tests__/image-utils.ts b/packages/gatsby-plugin-image/src/__tests__/image-utils.ts index 0c5782af57efc..1e734d1c4ec97 100644 --- a/packages/gatsby-plugin-image/src/__tests__/image-utils.ts +++ b/packages/gatsby-plugin-image/src/__tests__/image-utils.ts @@ -311,6 +311,11 @@ describe(`the helper utils`, () => { expect(url).toEqual(`https://example.com/afile.jpg/20/15/image.jpg`) }) + it(`gets a low-resolution image URL when width and height are set`, () => { + const url = getLowResolutionImageURL({ ...args, width: 200, height: 200 }) + expect(url).toEqual(`https://example.com/afile.jpg/20/20/image.jpg`) + }) + it(`gets a low-resolution image URL with correct aspect ratio`, () => { const url = getLowResolutionImageURL({ ...fullWidthArgs, diff --git a/packages/gatsby-plugin-image/src/image-utils.ts b/packages/gatsby-plugin-image/src/image-utils.ts index d4240ab77b187..af851f8e32251 100644 --- a/packages/gatsby-plugin-image/src/image-utils.ts +++ b/packages/gatsby-plugin-image/src/image-utils.ts @@ -168,7 +168,7 @@ export function setDefaultDimensions( layout = camelCase(layout) as Layout if (width && height) { - return { ...args, formats, layout } + return { ...args, formats, layout, aspectRatio: width / height } } if (sourceMetadata.width && sourceMetadata.height && !aspectRatio) { aspectRatio = sourceMetadata.width / sourceMetadata.height