Picture element has bigger height than the img

Question

Why is the picture element bigger than the image element? (The red line at the bottom of the sample) - chrome 88. How can I prevent that?

picture{
  background-color: red;
}

img{
  width:100%;
  height: auto;
}

<picture>
  <source srcset="https://i.stack.imgur.com/WeyM8.jpg" media="all">
  <img src="">
</picture>

Answer 1

Because as an inline-element, the image is vertically aligned at the baseline, which leaves some space below it. Just add display: block to the image to avoid that.

picture{
  background-color: red;
}

img{
  width:100%;
  height: auto;
  display: block;
}

<picture>
  <source srcset="https://i.stack.imgur.com/WeyM8.jpg" media="all">
  <img src="">
</picture>