图片元素的高度比img大

Question

为什么图片元素比图像元素大？（示例底部的红线）- chrome 88。我怎样才能防止这种情况发生？

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

因为作为内联元素，图像在基线处垂直对齐，在其下方留有一些空间。只需添加display: block到图像中即可避免这种情况。

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>