Javascript 使用img的简单div中的额外高度像素

在这个简单的布局中，我很难确定div的额外高度像素来自何处。我的期望是，该图像将确定div的高度，但它似乎要大几个像素。我试图去除的像素以蓝色显示。有什么想法吗

哦，我添加了一个按钮，可以使用javascript显式地设置图像父div的高度——我的问题是，它从何处获得额外的高度，或者没有javascript我如何才能做到这一点

函数更改（）{
var image=document.getElementById（'image1ID'）；
var width=image.naturalWidth；
变量高度=image.naturalHeight；
var imageDIV=document.getElementById（'image1DIV'）；
imageDIV.style.height=（100*高/宽）+“px”；
}

更改父div的高度
未明确将
img
标记高度设置为占据其父div的100%高度。您看到的是在父对象上设置样式的部分背景色

.flexrow img{
      height:100%;
    }

下面的片段


.flexrow{
显示器：flex；
弯曲方向：行；
柔性包装：无；
}
.flexcolumn{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.textblock{
宽度：170px；
}
.flexrow img{
身高：100%；
}

标题在这里
描述在这里
标题在这里
描述在这里
将
垂直对齐：中间
添加到您的
img
标签上。它删除了额外的空间


函数更改（）{
var image=document.getElementById（'image1ID'）；
var width=image.naturalWidth；
变量高度=image.naturalHeight；
var imageDIV=document.getElementById（'image1DIV'）；
imageDIV.style.height=（100*高/宽）+“px”；
}
#图像1id{
垂直对齐：中间对齐；
}

更改父div的高度
这只会拉伸图像，使其具有错误的纵横比。我希望图像保持其纵横比，并且父div与它的大小相同。这样，父元素的额外高度将始终与该颜色一起凸出…这是我能找到的最接近的值。父元素的高度从何而来？这似乎是真正的问题。我可以添加一些javascript并根据图像的纵横比进行显式设置，但我想知道为什么在这种情况下有必要这样做……事实上，您正在使用flex显示。flexrow将根据其最大同级的高度（即div宽度内容）进行调整。它们的高度比右侧旁边的图像大-最高的flexrow组件应该是图像本身，那么div从何处获得较高的高度？我刚刚在示例代码中添加了一个按钮，用于显式地将图像父div的高度设置为图像的高度，当我这样做时，它的布局非常完美-只是想知道父div从何处获得较高的高度…将
垂直对齐：中间
添加到
img
标记中。空间被移除。谢谢！！就是这样！加上它作为一个答案，我会给你的信用！很高兴它起作用了。把它贴出来作为答案