michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update Picture.astro so it no longer passes height and width attributes (#4797)

Browse source 
* 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 <tony.f.sullivan@outlook.com>
This commit is contained in:
Gerard de Brieder 2022-09-22 23:01:38 +02:00 committed by GitHub
parent a5df3f313e
commit 944d24e9ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/selfish-files-smoke.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/image': patch
---
Do not pass width and height to the img element when wrapped in a picture element

3
packages/integrations/image/components/Picture.astro
View file

@ -60,6 +60,9 @@ const { image, sources } = await getPicture({
background,
position,
});
delete image.width;
delete image.height;
---
<picture {...attrs}>

4
packages/integrations/image/test/picture-ssg.test.js
View file

@ -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);