身体和图像的大小差异
我创建了一个 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 768
774 774 774
为什么它们不同？我怎样才能使它们相同或调整差异？
互换的青春浏览 92回答 2
2回答
-
富国沪深
因为img默认是内联元素，并且vertical-align默认是baseline，也就是说它的底部和“x”字符的底部在同一行。虽然没有 x 或其他文本，但它会像有一样对齐。因此，避免这种情况的三种方法是：在img中添加样式“display:block”，这样垂直对齐会效率低下将img的“vertical-align”样式改为top、middle或bottom，这样基线以下的区域就不会放大容器在body中添加样式“font-size:0”，这样基线下的高度也将为0 -
桃花长相依
如果您将 img 包裹在 div 元素内并将 div 设置为 ，display:flex那么它将包裹图像，然后我相信它的滚动高度将与图像相同。我从未更改过主体的显示属性，也许这也可以？我不知道你到底想要实现什么，所以我不知道我告诉你的是否对你有用
随时随地看视频慕课网APP
相关分类
Html5