Repository navigation
🐛 [BUG] - Hero Image does not take full width when leveraging "picture" tag #908
Description
Describe the bug
I am trying to leverage the picture HTML tag in the Hero.Image component to leverage the sources attribute for better performance on smaller devices.
However, when I add the as="picture" prop to the Hero.Image, the Hero image does not always take the full width of it's container.
Context
I think the fix is to apply a width: 100% style to the picture component wrapping the img tag found here: https://github.com/primer/brand/blob/main/packages/react/src/Image/Image.tsx#L68
Currently, the img has 100% width but it does not fit its container since it is wrapped in a picture that does not have 100% width on it.
Reproduction steps
This bug is not currently live so I cannot link to a direct instance that is in production. I noticed this bug while enhancing the `Hero.Image`.
1. Render a `Hero` component with a `Hero.Image` that looks like this:
<Hero.Image
position="block-end"
src="REPLACE ME WITH DUMMY IMAGE"
alt=""
/>
You should see the Hero Image take the full width of the content of the page (1248px).
2. Leverage the `as="picture"` prop in the `Hero.Image`. The implementation should look like:
<Hero.Image
as="picture"
position="block-end"
src="REPLACE ME WITH DUMMY IMAGE"
sources={[.....]}
alt=""
/>
The `Hero.Image` no longer takes up the full width of the page.Expected behavior
I would expect the `Hero.Image` to take the full width of the page. I do not think leveraging the `picture` tag should affect the layout of the image.Screenshots
Before (without as="picture" prop):
After (leveraging as="picture" prop):
Browsers
No response
OS
No response
Activity