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

尝试使用此代码。我已将显示块和边框0添加到图像标记。

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

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

Answer 2

img是内联元素，因此默认情况下，g，j等字母上有下划线空间。因此，要修复此问题，您只需在图片上添加vertical-align: top即可。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

在图片中添加vertical-align: middle可以修复它下方的空白。如果需要，您也可以将vertical-align设置为bottom，也可以正常使用。

在下面的演示片段中，我向图片添加了一个属性object-fit，您可以在其中指定可用空间中框的采集特性。

body {
  margin: 0;
}

#content {
  float: left;
  background: #FFF;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}

#container {
  position: relative;
  overflow: hidden;
}

#container img {
  object-fit: cover;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

<div id="content">
  <div id="container">
    <img src="https://unsplash.it/g/1200/800">
  </div>
</div>

我希望它有所帮助。