HTML5/CSS3中图片无法占满Div高度，底部出现背景条的解决方法

这个问题我太熟悉了！你看到的底部浅蓝色条，本质是图片作为行内替换元素时默认的基线对齐行为导致的空隙，跟DOCTYPE关系不大，咱们用几种简单的方法就能解决：

方法1：将图片设置为块级元素 #

把图片的display设为block，彻底消除行内元素的基线预留空间：

<div style="overflow: hidden; border-radius: 15px; background-color: aqua;">
  <img style="width: 100%; display: block;" src="img/napkin.jpeg">
</div>

方法2：修改图片的垂直对齐方式 #

让图片对齐到容器的底部/顶部/中间，避开基线预留的空隙：

<div style="overflow: hidden; border-radius: 15px; background-color: aqua;">
  <img style="width: 100%; vertical-align: bottom;" src="img/napkin.jpeg">
</div>

（vertical-align: top或middle也能达到同样效果）

方法3：给容器设置行高为0 #

行内元素的空隙和容器的行高直接相关，把容器的line-height设为0就能消除这个空间：

<div style="overflow: hidden; border-radius: 15px; background-color: aqua; line-height: 0;">
  <img style="width: 100%;" src="img/napkin.jpeg">
</div>

为什么会出现这个空隙？ #

图片默认是行内替换元素，浏览器会为行内元素预留出「基线到容器底线」的空间，用来容纳像g、y这类带下沉部分的字母。这条空间就是你看到的浅蓝色背景条啦～

内容的提问来源于stack exchange，提问作者scopchanov