【問題的由來】

圖片適配正方形顯示方法一 <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>

圖片適配正方形顯示方法二 <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上寫上一遍；

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

【為什么】

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

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

最開始想各種辦法在img標簽上下功夫，但是發現在不知道圖片寬高數據，還要適配各種奇形怪狀的尺寸，這種方法的實現難度過大，需要進行大量的JS操作，在開發上、性能上和后期維護都是不可取的

當時項目催的很急，我的水平也一般般，情急之下，在網上找了N多的插件，最后選擇了一個可以裁剪的插件，在圖片的源頭進行限制，加上img標簽就可以了；問題是別人的插件在使用過程中性能問題和一些定制化方便實在是讓我煩不勝煩；我現在基本上都是自己寫需要的插件，不在做伸手黨，伸手黨的苦，源自與那種無奈的折磨

自己當時正在研究CSS3性特性，發現了background-size這個樣式加上background的其他樣式就可以各種比例的圖片顯示成為正方形；而后我希望能夠用background把background-size也包含就去，這樣代碼量會少很多；而正是這種方法的失敗，導致了后續被自己坑了一年半；當時的想法是全部用background簡寫，沒有找到合適的規則寫法，而且研究的時候，資料也說過盡量不要用background包含全部；瀏覽器解析起來比較麻煩，也影響性能

圖片地址來源于后臺數據請求，所以肯定不能下載CSS里面，都一樣怎么玩耍；所以需要寫在HTML標簽里面，我試驗了很多次，發現使用方法一種的寫法，就必須把background-size一起寫在里面，不然size樣式不生效；當時很苦惱，但卻只能這樣；知道今天

【茅塞頓開】

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

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

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

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

?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的一张正方形图片，伴随我一年半，敢问情绪的使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。