时间戳

首页 > 解决方案 > 图片元素的高度大于img

html - 图片元素的高度大于img

问题描述

为什么图片元素比图片元素大？（样品底部的红线）- 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>

标签： htmlcss

解决方案

因为作为内联元素，图像在基线处垂直对齐，这在其下方留下了一些空间。只需添加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>

推荐阅读