別眨眼網

您是否會疑惑，為什麼打開了谷歌、火狐、或者360瀏覽器等其他瀏覽器檢視網頁時一切正常，網站圖片非常賞心悅目。但一旦用IE瀏覽開啟，就為眼前的場景感到疑惑，這是同一個網站嗎？？？為什麼IE開啟時這些圖片都變形了呢？？

左圖為谷歌瀏覽器，右圖為IE瀏覽器

其實這都是IE相容性的問題，圖片可能是使用了object-fit這個CSS樣式。

object-fit作為Css3的語法，在處理圖片的大小和縮放比例上非常方便好用，但IE卻不支援該語法，我們只能藉助外掛來相容IE

透過GitHub搜尋object-fit IE，借鑑大佬相容IE的經驗。文件雖然全英文的，但是簡單明瞭

第一步引入外掛

可以用一下三種方法

（1）直接引入object-fit-images。js檔案

（2）在整合終端中透過npm安裝

（3）載入object-fit-images模組

（4）引入 objectFitImages 方法

第二步

img標籤需要有src或者srcset；

第三步

在CSS中對應的圖片標籤上新增object-fit： contain；（這裡也適用於fill、cover等樣式），並且新增 font-family屬性來允許IE識別：

如果你還需要定義object-position屬性

最後一步

最後一步也是最重要的一步，在之前使用objectFitImages方法，

修復頁面上的所有影象以及以後新增的所有影象，或者，只修復一次所需的影象

（1）透過選擇器（可以處理多張圖片）

（2）陣列或節點列表（可以處理多張圖片）

（3）單個元素

（4）還可以使用 jQuery

可以多次呼叫同一元素上的objectFitImages（），且不會出現問題。