From 944d24e9ee813bb7dd45776a975b5bccb46b44cd Mon Sep 17 00:00:00 2001 From: Gerard de Brieder Date: Thu, 22 Sep 2022 23:01:38 +0200 Subject: [PATCH] Update Picture.astro so it no longer passes height and width attributes (#4797) * Update Picture.astro the image variable of getPicture contains a width and height property, which we usually require. In this case, the image is wrapped in a picture tag and the img tag itself should not have a width and height property as this will break the responsiveness of the image provided by the picture tag. * added changeset * fixing SSG picture tests that were expecting img dimensions Co-authored-by: Tony Sullivan --- .changeset/selfish-files-smoke.md | 5 +++++ packages/integrations/image/components/Picture.astro | 3 +++ packages/integrations/image/test/picture-ssg.test.js | 4 ---- 3 files changed, 8 insertions(+), 4 deletions(-) create mode 100644 .changeset/selfish-files-smoke.md diff --git a/.changeset/selfish-files-smoke.md b/.changeset/selfish-files-smoke.md new file mode 100644 index 000000000..0db99d355 --- /dev/null +++ b/.changeset/selfish-files-smoke.md @@ -0,0 +1,5 @@ +--- +'@astrojs/image': patch +--- + +Do not pass width and height to the img element when wrapped in a picture element diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro index a2d80354a..e86ccc65d 100644 --- a/packages/integrations/image/components/Picture.astro +++ b/packages/integrations/image/components/Picture.astro @@ -60,6 +60,9 @@ const { image, sources } = await getPicture({ background, position, }); + +delete image.width; +delete image.height; --- diff --git a/packages/integrations/image/test/picture-ssg.test.js b/packages/integrations/image/test/picture-ssg.test.js index d68d43782..a997b57f1 100644 --- a/packages/integrations/image/test/picture-ssg.test.js +++ b/packages/integrations/image/test/picture-ssg.test.js @@ -235,8 +235,6 @@ describe('SSG pictures - build', function () { const image = $(`${id} img`); expect(image.attr('src')).to.match(regex); - expect(image.attr('width')).to.equal(size.width.toString()); - expect(image.attr('height')).to.equal(size.height.toString()); expect(image.attr('alt')).to.equal(alt); verifyImage(image.attr('src'), size); @@ -330,8 +328,6 @@ describe('SSG pictures with subpath - build', function () { const image = $(`${id} img`); expect(image.attr('src')).to.match(regex); - expect(image.attr('width')).to.equal(size.width.toString()); - expect(image.attr('height')).to.equal(size.height.toString()); expect(image.attr('alt')).to.equal(alt); verifyImage(image.attr('src').replace('/docs', ''), size);