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

前端之家收集整理的这篇文章主要介绍了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;
}

希望有所帮助.

原文链接:https://www.f2er.com/html/231284.html

猜你在找的HTML相关文章