【問題的由來】

1. 圖片適配正方形顯示方法一

   <style>
   .box{width:400px;height:400px;border:solid 5px red;margin:0 auto;background:#f4f4f4 url() no-repeat center;background-size:cover;}
   </style>
   <div class="box" style="background-image:url(http://data.upfitapp.com/data/2017/08/12/1722315025297765877.jpg);"></div>

2. 圖片適配正方形顯示方法二

   <
    
   style>
   .box2{width:400px;height:400px;border:solid 5px red;margin:0 auto;}
   </style>
   <div class="box2" style="background:#f4f4f4 url(http://data.upfitapp.com/data/2017/08/12/1722315025297765877.jpg) no-repeat center;background-size:cover;"></div>

【說明】

方法二是我這一年半以來一直使用的方法，沒錯每次需要適配圖片的時候，我都要在每個div上寫上一遍；

直到剛剛，我剛剛因為移動端回車按鍵臉紅，還沒有消退，有爆發了一個無比搞笑的事情

【為什麽】

為什麽，我這麽長時間，一直使用方法二，而不是方法一呢？看明白的同學，都知道，兩種方法對比，方法一和方法二差好幾個量級；

而我卻用了一年半，回溯曾經探索不同尺寸的圖片要顯示在正方形裏面，我走過了很多個路口：

1. 最開始想各種辦法在img標簽上下功夫，但是發現在不知道圖片寬高數據，還要適配各種奇形怪狀的尺寸，這種方法的實現難度過大，需要進行大量的JS操作，在開發上、性能上和後期維護都是不可取的
2. 當時項目催的很急，我的水平也一般般，情急之下，在網上找了N多的插件，最後選擇了一個可以裁剪的插件，在圖片的源頭進行限制，加上img標簽就可以了；問題是別人的插件在使用過程中性能問題和一些定制化方便實在是讓我煩不勝煩；我現在基本上都是自己寫需要的插件，不在做伸手黨，伸手黨的苦，源自與那種無奈的折磨
3. 自己當時正在研究CSS3性特性，發現了background-size這個樣式加上background的其他樣式就可以各種比例的圖片顯示成為正方形；而後我希望能夠用background把background-size也包含就去，這樣代碼量會少很多；而正是這種方法的失敗，導致了後續被自己坑了一年半；當時的想法是全部用background簡寫，沒有找到合適的規則寫法，而且研究的時候，資料也說過盡量不要用background包含全部；瀏覽器解析起來比較麻煩，也影響性能
4. 圖片地址來源於後臺數據請求，所以肯定不能下載CSS裏面，都一樣怎麽玩耍；所以需要寫在HTML標簽裏面，我試驗了很多次，發現使用方法一種的寫法，就必須把background-size一起寫在裏面，不然size樣式不生效；當時很苦惱，但卻只能這樣；知道今天

【茅塞頓開】

類似簡寫方法，其實有很多樣式都有，比如：padding、margin等，由於background包括background-size，而background-size的默認值auto，導致了其失效；

情緒的力量，每次開發到這塊，自己都由些許情緒，仔細了解才知道，為了一個圖片地址，我要寫那麽多重復的代碼，而我還樂此不疲的不去深入思考為什麽；

管理情緒，情緒給我們的最大幫助就是發現問題，而我們不應該不知所措，自亂陣腳；而應該去接觸和了解它，知道這是不是一個問題，是問題，如何解決呢？及時沒有立刻解決也要在大腦中留個疑問；

靈感的來源就是自己大腦中有多少個為什麽，為什麽越多靈感也就越多；

一張正方形圖片，伴隨我一年半，敢問情緒的使用方法