astro icon indicating copy to clipboard operation
astro copied to clipboard

Picture element generating width and height on the img element

Open smeevil opened this issue 1 year ago • 3 comments

What version of astro are you using?

1.2.6

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

nom

What operating system are you using?

MacOS 12.4

Describe the Bug

I'm having a bit of trouble with the Picture element. It seems it generates an img tag with a set width and height, which causes the image to stop being responsive. I've compared the generated code from the Picture tag to the one described by MDN. The MDN one does not have a width/height on the img tag and works as expected.

Am I doing something wrong, or is this a bug maybe?

I've added two screenshots where you can find the original code in the template and the generated HTML The first picture tag is generated by the Picture component, the second by hand (which works properly)

If I remove the width and height van the img tag generated by the Picture element, it works as intended. I did maybe find a related message to this here: https://discord.com/channels/830184174198718474/1018629133951045703/1019002736584429679

Source code CleanShot_2022-09-18_at_10 26 54

Generated code CleanShot_2022-09-18_at_10 25 13

I tried to make a stackblitz for this, but that gives an error trying to install sharp module :/

Gerard.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-q4vakz?file=src%2Fpages%2Findex.astro

Participation

  • [ ] I am willing to submit a pull request for this issue.

well... I'll give it a shot at #4797 :)

smeevil avatar Sep 18 '22 14:09 smeevil