这是很久以前就讨论过的问题,但是好久没注意,昨天在用到的时候,竟然一时忘记了什么原因,这就很尴尬

一、问题

1.png

像是上面这个图,就很明显的问题,图片放在div中,但是下方会出现一个白框。虽然图片使用的是

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

但是仍旧存在这个问题。

二、问题产生的原因

我看的文章中最好的解释是张鑫旭的一篇博客(其实除了这篇文章,其他的我也没看。。)

最直接的原因就是 img 是行内元素,而其vertical-align方式默认是 baseline

div本身是有line-height的,baseline对其方式导致图片并不是与div的真实底部对其,而是文基线。

所谓的基线底部不包括 line-height 的空白显示部分

2.png

基线对齐导致图片总是和div下边缘有一段空隙,而 line-height 同样表现在行内元素的 img 上,因此即使没有文字,图片也存在一个 line-height 的影响。

三、解决

1、display:block

最直接的办法肯定是将 img 作为 block 来处理,就不存在line-height的影响了。

3.png

但是将 img 作为 block 处理,会导致文字换行,因此这个方式有些时候并不适用,如果只有图片的话, 那就可以直接来设置。

2、 vertical-align:bottom;

既然是因为 vertical-align:baseline 存在问题,那将其改变,不适用默认对其。

底部对其可以直接使用 vertical-align:bottom

4.png

3、 line-height:0;

上面提到div的line-height会影响行内元素,因此,如果需要将图片和文字都基于底部对其,则使用

div{
    line-height:0;
}

即可

5.png