Update Picture.astro so it no longer passes height and width attribut…

…es (#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 <[email protected]>
withastro · Sep 22, 2022 · 944d24e · 944d24e
1 parent a5df3f3
commit 944d24e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/.changeset/selfish-files-smoke.md 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
@@ -60,6 +60,9 @@ const { image, sources } = await getPicture({
  background,
  position,
 });
+
+delete image.width;
+delete image.height;
 ---
 
 <picture {...attrs}>

diff --git 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);