内部带有img标签的div高度错误[重复]答案

【问题标题】：Wrong height of div with img tag inside [duplicate]内部带有img标签的div高度错误[重复]
【发布时间】：2012-05-26 06:15:15
【问题描述】：

我有一个div，里面有图片标签，div的高度好像比图片大一点。

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

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

这是场景：

<div class='box'><img src='image.jpg'></div>

CSS 是：

img { height: auto; max-width: 100%; width: auto; }

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

【问题讨论】：

【解决方案1】：

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

或者如果你真的不想浮动它，你可以在图像上使用边框折叠。但是，这样的解决方案最终可能会导致更多问题。

所以它最终会变成这样的

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

希望有帮助。

【讨论】：

【解决方案2】：

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

img {
  vertical-align:middle;
}

【讨论】：

【解决方案3】：

使用 img: 块。就是这样……

【讨论】：

【解决方案4】：

让div 与其子元素img 相同：

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

div img {
    margin: 0;
}

不过，我建议您使用 span 而不是 div（这样它会自动将其宽度“折叠”到其内容的宽度：

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

【讨论】：

【解决方案5】：

您是在谈论仅设置 Div 的大小吗？在 CSS 中：

.box
{
 height: 10px;
 width:10px;
}

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

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

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

【讨论】：

【解决方案6】：

有效的简单现代解决方案如下

div {
    display: flex;
}

【讨论】：