img图片撑不满整个div

Question

<div class="content">
<img src="./1.jpg" alt="">
</div>
div元素不设置宽高，设一个背景颜色以便观察，内放img，但img图片撑不满整个div, (能观察到图片底部留有空隙)，如何解决？

Answer 1

给img设置display:block 或者设置父元素font-size:0;line-height:0;（设置任意一个都行），不要只晓得这样设置.要知道这个空隙由于inline元素的高度是由内容长度和line-height决定的

Answer 2

img标签自带有3px的空隙，有很多解决方法
第一种:设置img{font-size:0}
第二种:设置img{display:block}
第三种:设置img{vertical-align:top/middle};
推荐使用第二种。第三种也比较常用

Answer 3

给img设置display:block

Answer 4

设置img为块元素，宽度100%，高度100%，边框为0；就可以撑满盒子了。

Answer 5

参考链接：https://segmentfault.com/q/10...
①display：block;
②给父级设置font-size：0；

Answer 6

解决方法
1、设置父元素的font-size:0;
2、设置图片的display:block;
3、设置图片的vertical-align: top;

参考这个 img下几像素空白产生原因

Answer 7

可以给div设置css样式overflow:hidden;溢出隐藏，然后图片稍微调一下宽高

Answer 8

图片可能有问题，底部有白边，用PS打开看看