關于圖片img的width和height的一些心得

編輯：狂族晨曦 來源：經驗雜筆 日期：2016-04-03 閱讀： 4,049 次 搶個沙發 百度已收錄

成都航院計算機工程系教過先森網頁樣式代碼CSS，但是正如先森對大學的領悟“大學是一個真正讓你體會什么叫做‘師傅領進門 修行靠個人’的地方”一樣，老師教的畢竟是基礎，不可能面面俱到。實踐出真理，先森漸漸也摸索出了一些對于網站上圖片的寬width和高height的一些心得。

先森的網站上用的是百度UEditor編輯器，先森一直覺得這個編輯器很好用，但是還是有些小毛病，需要我們自行改造插件。其中一個問題，就是UEditor在上傳圖片的時候，會設置兩個圖片的寬高屬性：

<img width="***" height="***" style=="width=***px;height=***px;" />

這樣看著是沒有什么問題的，但實際使用起來卻產生了在移動端圖片無法自適應的問題：高度操持不變，寬度自適應。這就導致了圖片拉伸。先森當初也是到處尋求幫助，最終自己檢查出來的。

圖片被拉伸

當然，這最終被先森解決了。關于更多百度UEditor編輯器的內容，先森也為大家分享了：

• 百度UEditor編輯器插件1.4.3.1 For WordPress

• 解決使用百度UEditor編輯器后移動端圖片被拉伸問題

• 解決百度UEditor編輯器上傳的圖片無法被七牛CDN自動緩存問題

• WordPress百度UEditor編輯器自動添加七牛云儲存裁剪代碼

好了，上面說多了。其實本文中主要說的不是后面的style中的寬高，而是前面的img標簽中的寬高。

這個寬高之前先森是沒有怎么注意的，認為先森已經在CSS中設置了圖片的寬高，這個寬高就沒必要設置了。相信很多站長和先森的想法是一樣的。但是先森看了露兜的一篇文章之后改變了這個看法。

童鞋們可以先去看看w3school中對img標簽的說明：

• HTML <img> 標簽的 height 和 width 屬性

w3school詳細介紹了img標簽中width和height兩個屬性的重要性。先森看中的其實是露兜文章中一個評論的解釋。關于這篇文章，大家也可以去看看，露兜大大也對這條評論做了著重推薦：

• WordPress 自動去除img的width和height屬性

而先森看中的評論內容則如下，是一個ID為“于江水”的哥們寫的：

“這樣做從前端的角度來說是不合理的。

img 的 alt 屬性是必須的，width 和 height 是推薦的。因為 img 在網頁的加載是要比 div 這些結構慢的，所以往往是結構和文字先加載了，再加載的圖片。這時候，由于瀏覽器預先不知道圖片的尺寸大小，所以無法渲染圖片在網頁中的位置和尺寸。等圖片加載進來之后，再進行渲染，這時候就產生重繪（就是瀏覽器重新計算相關元素的位置，具體表現就是圖片出現了，圖片下面的文字跑到下面了，淘寶的商品介紹頁面，這里非常明顯。）

而帶有 width 和 height 的 img，瀏覽器會計算出來，留空，然后等待圖片加載，避免頁面重繪，提高前端性能和用戶體驗，這里在知乎上多圖的答案可以看出來。

那么回到露兜大大在乎的響應式的圖片處理。這里應該對 img 設置 max-width: 100%; height: auto; 這兩條屬性，才可以保證成比例拉伸。”

總結起來也就是設置了width和height兩個屬性后，瀏覽器會給沒加載出來的圖片留出應有的位置。初看這個觀點的時候，先森雖然知道了，但也沒有重視。所以，也就在網站改版的時候沒給圖片加width和height兩個屬性。

先森在改版后，又加入了CDN，在GTmetrix測試網站的時候，結果第一條優化建議就是給圖片指定尺寸（點擊放大）：

GTmetrix測評優化

而且先森這一點的得分是0分，是在有點郁悶，看來圖片width和height兩個屬性真的很重要。所以建議大家上該設置的還是設置上。至于設置的方法，可以參考上面給露兜大大留評論的那位仁兄的方法：

max-width: 100%; height: auto;