身体和图像的大小差异

我创建了一个 html 文档并在正文中添加了图像。当我检查图像和身体的高度时，我发现它们的高度不同。可以在此处查看示例。这是html：

<!DOCTYPE html>

<head>

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>

</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