Image component with aspectRatio attribute is missing width

Hi everyone,
When I try to use the Image component with an aspectRatio, as shown in this link, I notice that a div is created to wrap the image.

The div includes padding-bottom to match the aspectRatio attribute, which is correct.

However, it’s missing a width (100% as expected), so the image never appears.
Have any of you faced a similar issue? How can I contribute to fixing this?

Hi Juzser,

Can you share the code where you’re configuring the image (removing any sensitive info) - is there any way to specify setting the width property to 100% on the Image component itself?

Hi Liam,

Good to see you here.

My mock is really simple:

<BlockStack padding={'tight'} spacing={'extraLoose'}>
            <View border="base" inlineAlignment="center" borderWidth="medium" cornerRadius="large" overflow="hidden" inlineSize="fill">
              <Image source={...} fit="contain" aspectRatio={5} />
            </View>
</BlockStack>

And you can see the image below, when there is AspectRatio attribute, a div will be rendered to contain image, but that div has only padding-bottom, it should have width: 100% to show up the image inside.

There is not any way to setup width for Image itself, because as I understand, dev team want to keep the original size of Image following aspect ratio, to make sure the image will not be stretch (that’s fine, and correct idea).

But somehow, it makes the Image cannot become full-width.

My solution is very simple, but need to test deeply, you just have to add the width: 100% into the aspectRatio div style as image below.

I’ve researched and see, the components are rendered via remote-ui/core package here.
But when I tried to find the root component DOM, seems like there are under the hood structure that is not public, so I can’t see the point.

So I think if you can talk to the team to double check this, that will be awesome.

Thank Liam!