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