我創(chuàng)建了一個 html 文檔并在正文中添加了圖像。當(dāng)我檢查圖像和身體的高度時，我發(fā)現(xiàn)它們的高度不同?？梢栽诖颂幉榭词纠?。這是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為什么它們不同？我怎樣才能使它們相同或調(diào)整差異？
2 回答
富國滬深
TA貢獻(xiàn)1790條經(jīng)驗 獲得超9個贊
因為img默認(rèn)是內(nèi)聯(lián)元素，并且vertical-align默認(rèn)是baseline，也就是說它的底部和“x”字符的底部在同一行。雖然沒有 x 或其他文本，但它會像有一樣對齊。
因此，避免這種情況的三種方法是：
在img中添加樣式“display:block”，這樣垂直對齊會效率低下
將img的“vertical-align”樣式改為top、middle或bottom，這樣基線以下的區(qū)域就不會放大容器
在body中添加樣式“font-size:0”，這樣基線下的高度也將為0
桃花長相依
TA貢獻(xiàn)1860條經(jīng)驗 獲得超8個贊
如果您將 img 包裹在 div 元素內(nèi)并將 div 設(shè)置為 ，display:flex那么它將包裹圖像，然后我相信它的滾動高度將與圖像相同。
我從未更改過主體的顯示屬性，也許這也可以？我不知道你到底想要實現(xiàn)什么，所以我不知道我告訴你的是否對你有用
- 2 回答
- 0 關(guān)注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消