Image 内部带有img标签的div高度错误

我有一个里面有图像标签的div，div的高度似乎比图像大一点

img {
  vertical-align:middle;
}

我可以通过为div设置特定高度（与图像相同）来解决此问题，但我使用的是响应性布局，我不想为div设置特定高度，以便在浏览器窗口缩放时（例如在移动设备中），div将缩放并保持比例

我需要div高度与图像高度完全相同

这是一个场景：

Css是：

img{
高度：自动；
最大宽度：100%；
宽度：自动；
}

有人知道如何解决这个问题吗

---

您是说只设置Div的大小吗？ 在css中：

您也可以不在代码中设置图像，而是将“box’s”DIV背景图像设置为该图像：

.box
{
 height: 10px;
 width:10px;
 background:url('/imgURL/filename.gif') white no-repeat;
}

---

（10px当然只是一个随机数。将其设置为您需要的任何大小）

要使

div

与其子

img

元素相同，请执行以下操作：

div {
    display: inline-block;
    padding: 0;
}

div img {
    margin: 0;
}

不过，我建议您使用

span

而不是

div

（这样它会自动将其宽度“折叠”到其内容的宽度：

span {
    padding: 0;
}
span img {
    margin: 0;
}

---

.

问题在于，图像的自然样式使其底部有一点空白，至少可以说是丑陋的。一个简单的解决方法是只在图像上显示：block，float:left，空间应该消失

或者，如果你真的不想浮动它，你可以在图像上的边框塌陷的情况下进行游戏。但是，这是一个最终可能会导致更多问题的解决方案

所以最终会变成这样

.box img {
  display: block; /*inline block would be fine too*/
  float: left;
}

---

希望有帮助。

使用img:block。仅此而已。

最简单的方法是确定图像的垂直对齐

img {
  vertical-align:middle;
}

---

最简单的现代解决方案如下

div {
    display: flex;
}

---

我正在处理一个响应性布局，因此我不能为div设置特定的高度；因此，当浏览器窗口调整大小时，div会缩放。太好了！它与display:block-only一起工作！非常感谢。