CSS:适合div内的图像

Question

我想去掉下图下面的白线:

我的 CSS:

#content {
  float: left;
  background:#FFF;
  bottom:0;
  width:100%;
  overflow:hidden;
}
#container {
  position: relative;
  overflow:hidden;
}
#container img {
  width:100%;
  height:auto
}

我的 html:

<div id="content">
  <div id="container">
    <img src="img/lib.JPG" width="100%"/>
  </div>
</div>

我尝试了很多技巧，但没有一个在所有浏览器中都有效

Answer 1

img 是内联元素，因此默认情况下，g、j 等字母的下部有空间。所以要解决这个问题，您只需在图像上添加 vertical-align: top。

#content {
  float: left;
  background: #FFF;
  width: 100%;
}
#container {
  border: 1px solid black;
}
#container img {
  width: 100%;
  vertical-align: top;
}

<div id="content">
  <div id="container">
    <img src="http://placehold.it/350x150">
  </div>
</div>