專案遇到div標籤裡放img標籤的情況，div的width、height 都已經設定好，img的width、height 為100%。
但是發現渲染出來的img超出了div的高度，如下圖：
後來嘗試了下發現應該給div設定line-height（和height的大小一樣），這樣渲染出來的img才不會超過div的範圍。見下圖：
總結：div裡寫img且img的寬高和div一致的時候，一定要設定line-height，這樣才能讓img完全撐滿div容器。
img標籤的運用
網頁中常見的影象格式大體上有三種，jpg,gif和png 有失真壓縮，色彩豐富，隱藏一些無用的資訊，只保留有用的部分。簡單動畫，背景透明。無失真壓縮，透明，交錯，動畫 使用img標籤，此標籤單獨出現 alt 的替換文字，當無法開啟時，網頁會自動顯示alt的內容來代替 1 html 2 head ti...
div中的img標籤多餘空白bug解決方案
上圖之前之後 原圖是這樣的 發現區別了吧，這裡用到了css3的object fit屬性為cover 保持原有尺寸比例。保證替換內容尺寸一定大於容器尺寸，寬度和高度至少有乙個和容器一致。因此，此引數可能會讓替換內容 如 部分區域不可見。之前不知道這個屬性的時候還傻傻寫js判斷 img.onload f...
img標籤的onerror事件
當不存在時，將觸發 onerror，而 onerror 中又為 img 指定乙個logoerror.png 也就是說存在則顯示logo.png，不存在將顯示 logoerror.png。但問題來了，如果logoerror.png 也不存在，則繼續觸發 onerror，導致迴圈，故會出現開啟網頁時提示...