image – 内置img标签的div的高度不正确

我里面有一个带有图像标签的div,而div的高度似乎比图像大一点.

我可以通过为div设置一个特定的高度来解决这个问题(与图像相同),但是我正在使用响应式布局,我不想为div设置一个特定的高度,所以当浏览器窗口缩放(例如在移动设备中),div将缩放并维持比例.

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

这是场景：

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

Css是：

img {
身高：自动;
最大宽度：100％;
宽度：自动;
}

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

解决方法

问题在于图像的自然风格给它带来了一点点的边缘,这使得它丑陋至少.一个简单的修复是只显示：block,float：留在图像上,空间应该消失.

如果你真的不想浮动它,或者你可以在图像上进行边框折叠.但是,这是一个可能会导致更多问题的解决方案.

所以最终会是这样的

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

希望有所帮助.