Image component isn't fluid

Bug report

Describe the bug

The Image component wrapper has a fixed width and can’t be changed.

To Reproduce

I created a codesandbox to illustrate the issue. https://codesandbox.io/s/image-component-isnt-fluid-vsho0

This is a really common layout, images in columns. They have a final width but they should still be fluid. If I remove the width and height props then the Image component will use the deviceSizes setting which is not ideal as those are generic.

Expected behavior

I was wondering if we could turn that fixed size off as the padding on the internal wrapper already takes care of maintaining the image ratio.

Additional context

I understand why that is there, it helps mitigate layout shifting, and I appreciate that but it’s really rare when an image is fixed, 100% of the time. The web has passed that point long ago. I also wanna start a conversation. Should the Image component use the sizes attribute and respect media queries? Using this codesandbox as an example, these images should probably be served as the following sizes="(max-width: 768px) 768px, 269px". We want a bigger image that will be 100% of the viewport and then go back to their max size.

[marlonmarcello]

Also, maintaining just an img tag will make sure that object-fit and other css properties are respected and work as you intended.

[dkodeit]

As mentioned, If say the component width is set to 900, an inline style will be set on the image wrapper to max-width:100% width: 900px. To address this I can target the wrapper and set width:100% !important but it would be nice to have the component default to fluid.