我创建了一个 html 文档并在正文中添加了图像。当我检查图像和身体的高度时，我发现它们的高度不同。可以在此处查看示例。这是html：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><script>window.onload = function() {var el = document.getElementById('test');console.log(el.scrollHeight,el.offsetHeight,el.clientHeight)console.log(document.body.scrollHeight,document.body.offsetHeight,document.body.clientHeight)}</script></head><body><img id="test" src="img2.png"/></body></html>控制台输出：768 768 768774 774 774为什么它们不同？我怎样才能使它们相同或调整差异？
2 回答
富国沪深
TA贡献1790条经验 获得超9个赞
因为img默认是内联元素，并且vertical-align默认是baseline，也就是说它的底部和“x”字符的底部在同一行。虽然没有 x 或其他文本，但它会像有一样对齐。
因此，避免这种情况的三种方法是：
在img中添加样式“display:block”，这样垂直对齐会效率低下
将img的“vertical-align”样式改为top、middle或bottom，这样基线以下的区域就不会放大容器
在body中添加样式“font-size:0”，这样基线下的高度也将为0
桃花长相依
TA贡献1860条经验 获得超8个赞
如果您将 img 包裹在 div 元素内并将 div 设置为 ，display:flex那么它将包裹图像，然后我相信它的滚动高度将与图像相同。
我从未更改过主体的显示属性，也许这也可以？我不知道你到底想要实现什么，所以我不知道我告诉你的是否对你有用
- 2 回答
- 0 关注
- 91 浏览
添加回答
举报
0/150
提交
取消