高度不定CSS设置img充满div的解决方案(img标签3px问题)

使用CSS布局的进个遇到这样一个问题:设置一个固定宽和高的div,里面放置一张图片,使图片的宽度和高度与父级的div保持一致。

看起来是一个很简单的问题啊,有什么难的?

常规写法

于是可以这样写:

<style type="text/css">
  *{
    padding:0;
    margin:0;
  }
  #picdiv{
    width:400px;
    height:300px;
    background:red;
  }
  #picdiv img{
    width:100%;
    height:100%;
  }
</style>
<div id="picdiv">
  <img src="ly.jpg" alt=""/>
</div>

效果也很好:

父元素高度不固定?

按照上面的逻辑可以很容易写出下面的代码:

<style type="text/css">
  *{
    padding:0;
    margin:0;
  }
  #picdiv{
    width:400px;
    background:red;
  }
  #picdiv img{
    width:100%;
    height:100%;
  }
</style>
<div id="picdiv">
  <img src="ly.jpg" alt=""/>
</div>

可是你会发现:

哎?柳岩的“下面”怎么红了?

现象解释

浏览器在解析img标签的时候,会默认给图片下面留空(大约3px),就像对待字母如y g 一样。如下图:

解决方案

目前有下面的种方法:

方法1 display:block

使用 display:block 改变img的默认布局方式。

#picdiv{
  width:400px;
  background:red;
}
#picdiv img{
  width:100%;
  height:100%;
  display:block;
}
方法2 vertical-align:center

使用 vertical-align:center 改变img的对齐方式

#picdiv{
  width:400px;
  background:red;
}
#picdiv img{
  width:100%;
  height:100%;
  vertical-align:center
}
方法3 父级设置line-height:0或者font-size:0
#picdiv{
  width:400px;
  background:red;
  line-height:0;
  font-size:0;/*这两个使用任何一个都可以*/
}
#picdiv img{
  width:100%;
  height:100%;
}

这就是目前我所找到的解决方法,其实明白了这3px产生的原因,也就自然有应对方案了。

 标签: CSS, CSS3, 前端开发

作者  :  sailor

仅仅看明白了还不够,能把别人给讲明白了才算及格。



最新文章