解決object-fit兼容IE瀏覽器實現圖片自適應

前言

最近作一個vue項目須要作一個上傳頭像功能，自己來講這是一個很是簡單的功能，由於我這邊用的是element ui因此我就直接使用element 自帶的上傳頭像組件。

<el-upload  class="avatar-uploader"  action="https://jsonplaceholder.typicode.com/posts/"  :show-file-list="false"  :on-success="handleAvatarSuccess"  :before-upload="beforeAvatarUpload">  <img v-if="imageUrl" :src="imageUrl" class="avatar">  <i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>

輕鬆又愉快，就完成上傳圖片並自帶預覽效果 

遇到問題

這時就出現一個問題用戶上傳圖片不必定會徹底符合咱們設定的寬高比，所以就會出現圖片被拉伸壓縮來符合咱們的設定的寬高比。

這樣的效果，明顯是有點不太理想的。

第一步解決方案

所以咱們須要改變這個壓縮效果，咱們最簡單的方法就是設定CSS屬性 object-fit，能用CSS實現的話就是堅定不要使用JS。寫法很是簡單，就兩三行代碼就能夠了。

img {  object-fit: cover;}

增長這個 object-fitCSS屬性後，能夠看到圖片雖然是被裁剪了，但如今已經沒有被壓縮變形了。這個樣子其實仍是能夠接受的。

順便研究一下object-fit

object-fit 的取值範圍

.fill { object-fit: fill; }.contain { object-fit: contain; }.cover { object-fit: cover; }.none { object-fit: none; }.scale-down { object-fit: scale-down; }

每一個屬性值的具體含義以下（本身理解的白話文，官方釋義見官網）：

• fill: 中文釋義「填充」。默認值。替換內容拉伸填滿整個content box, 不保證保持原有的比例。

• contain: 中文釋義「包含」。保持原有尺寸比例。保證替換內容尺寸必定能夠在容器裏面放得下。所以，此參數可能會在容器內留下空白。

• cover: 中文釋義「覆蓋」。保持原有尺寸比例。保證替換內容尺寸必定大於容器尺寸，寬度和高度至少有一個和容器一致。所以，此參數可能會讓替換內容（如圖片）部分區域不可見。

• none: 中文釋義「無」。保持原有尺寸比例。同時保持替換內容原始尺寸大小。

• scale-down: 中文釋義「下降」。就好像依次設置了none或contain, 最終呈現的是尺寸比較小的那個。

效果對比圖：  你們能夠對照示意感覺下，什麼是內容拉伸(fill)，什麼是內容所有都顯示(contain)，什麼是容器沒有留白(cover)，什麼是該多大就多大(none)。

object-fit兼容性

真的不看還好，一看才知道，這玩意不兼容IE瀏覽器，任何版本的IE瀏覽器。由於我這邊的用戶主要使用的瀏覽器就是IE，這個問題仍是必需要解決的！ 

進一步解決方案，兼容IE

其實要實現兼容IE的話，網上有不少解決方案，用background-size,background-image替換圖片，或者用JS根據圖片的寬高從新設置顯示框的寬高。。。但反正結合我本身的代碼，以及實際狀況以爲須要改動的地方太多，太麻煩，並且實現起來也不理想。最後找到一個最簡單的兼容方法只須要四步，也不超過十行代碼就完美讓IE兼容了 object-fit

• cnpm install--saveobject-fit-images安裝object-fit-images包

• importobjectFitImagesfrom‘object-fit-images’在你上傳圖片的組件裏，import進來

• 圖片的CSS設置

img{object-fit:cover;font-family: 「object-fit: cover;」;}

• 在須要處理這個圖片地方，執行這個 objectFitImages處理圖片方法便可。例如個人是vue項目，所以通常都是在 mounted之中執行,若是這個圖片還會改變的話，就是須要監聽它的變化，在它變化後再執行一次這個處理方法。 watch之下。

1. <img v-if="logo" :src="logo" class="avatar" ref="imghead" id="imghead" />

2. 
   

3. // var el = document.getElementById('imghead')

4. // objectFitImages(el)

5. objectFitImages( this.$refs.imghead)

有關更多object-fit-images的用法，能夠查看如下地址。

object-fit-images github介紹地址(https://github.com/fregante/object-fit-images)

總結

至此就完美解決了圖片上傳被壓縮拉伸展現的問題，兼容全部瀏覽器。還有就是IE瀏覽器是真的坑！