IE自動給圖片加上width和height屬性的修復

IE自動給圖片加上width和height屬性的修復

做者：吳業飛
時間：2018.07.25

情景再現

在項目中寫了一個圖片列表，再普通不過的一行3張圖，用的是柵格佈局，html代碼大概以下

<div class="row">
	  <div class="col-md-4"><img src="" alt=""></div>
	  <div class="col-md-4"><img src="" alt=""></div>
	  <div class="col-md-4"><img src="" alt=""></div>
	</div>
複製代碼

在全局CSS我是申明瞭

img {
	    max-width: 100%;
	}
複製代碼

按照預期無論圖片尺寸怎樣應該是自動填充滿容器達到自適應效果的，在Chrome下確實也是一切正常，但是在IE下（測試版本IE10），發現IE自做聰明地把圖片原始尺寸加到了img標籤上，像這樣<img width="750px" height="750px">,這樣一來雖然仍是一行3張圖沒毛病可是圖片以原始尺寸顯示被擠壓地很醜，沒有等比縮放。無論這是特性仍是bug，都得修復！

解決方案

在靠近</body>的地方加上

<script>
    window.onload = function () {
    // fix bug for IE auto add width/height at img
    var img = document.getElementsByTagName("img");
    var len = img.length;
    for(var i = 0;i < len;i++) {
      img[i].removeAttribute("width");
      img[i].removeAttribute("height");
    }
</script>
複製代碼

原理就是在圖片渲染完後清除圖片上的width和height屬性。

---

版權聲明：自由轉載-非商用-非衍生-保持署名