CSS:fit-image-insidediv

我想删除下图下方的白线：

我的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>

---

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

试试这段代码。我已将显示块和边框0添加到图像标记中

#内容{
浮动：左；
背景：#FFF；
底部：0；
宽度：100%；
溢出：隐藏；
}
#容器{
位置：相对位置；
溢出：隐藏；
}
#集装箱img{
宽度：100%；
高度：自动；
显示：块；
边界：0px；
}

---

img

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

垂直对齐：top

#内容{
浮动：左；
背景：#FFF；
宽度：100%；
}
#容器{
边框：1px纯黑；
}
#集装箱img{
宽度：100%；
垂直对齐：顶部；
}

---

在图像中添加

垂直对齐：中间

将修复图像下方的间隙。如果需要，还可以将

垂直对齐

设置为

底部

，也可以使用

在下面的演示片段中，我在图像中又添加了一个属性

object fit

，您可以使用它在可用空间中指定框的采集性质

正文{
保证金：0；
}
#内容{
浮动：左；
背景：#FFF；
底部：0；
宽度：100%；
溢出：隐藏；
}
#容器{
位置：相对位置；
溢出：隐藏；
}
#集装箱img{
对象匹配：覆盖；
宽度：100%；
高度：自动；
垂直对齐：中间对齐；
}

请为您的问题提供一个工作示例：

width=“100%”

在HTML5中无效。非常感谢您终于解决了这个问题^^