width 100 not filling parent code example

Example 1: css fill parent height

html, body {
  height: 100%
}
body {
  display: flex;
  align-items: stretch;
}

#root {
  width: 100%
}

Example 2: height auto width 100% will ignore width and height

<style>
  img {
    width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
  } 
</style>
<img src="hero_image.jpg" alt="" width="500" height="500">