【問(wèn)題的由來(lái)】

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

【說(shuō)明】

方法二是我這一年半以來(lái)一直使用的方法，沒(méi)錯(cuò)每次需要適配圖片的時(shí)候，我都要在每個(gè)div上寫(xiě)上一遍；

直到剛剛，我剛剛因?yàn)橐苿?dòng)端回車(chē)按鍵臉紅，還沒(méi)有消退，有爆發(fā)了一個(gè)無(wú)比搞笑的事情

【為什么】

為什么，我這么長(zhǎng)時(shí)間，一直使用方法二，而不是方法一呢？看明白的同學(xué)，都知道，兩種方法對(duì)比，方法一和方法二差好幾個(gè)量級(jí)；

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

最開(kāi)始想各種辦法在img標(biāo)簽上下功夫，但是發(fā)現(xiàn)在不知道圖片寬高數(shù)據(jù)，還要適配各種奇形怪狀的尺寸，這種方法的實(shí)現(xiàn)難度過(guò)大，需要進(jìn)行大量的JS操作，在開(kāi)發(fā)上、性能上和后期維護(hù)都是不可取的

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

自己當(dāng)時(shí)正在研究CSS3性特性，發(fā)現(xiàn)了background-size這個(gè)樣式加上background的其他樣式就可以各種比例的圖片顯示成為正方形；而后我希望能夠用background把background-size也包含就去，這樣代碼量會(huì)少很多；而正是這種方法的失敗，導(dǎo)致了后續(xù)被自己坑了一年半；當(dāng)時(shí)的想法是全部用background簡(jiǎn)寫(xiě)，沒(méi)有找到合適的規(guī)則寫(xiě)法，而且研究的時(shí)候，資料也說(shuō)過(guò)盡量不要用background包含全部；瀏覽器解析起來(lái)比較麻煩，也影響性能

圖片地址來(lái)源于后臺(tái)數(shù)據(jù)請(qǐng)求，所以肯定不能下載CSS里面，都一樣怎么玩耍；所以需要寫(xiě)在HTML標(biāo)簽里面，我試驗(yàn)了很多次，發(fā)現(xiàn)使用方法一種的寫(xiě)法，就必須把background-size一起寫(xiě)在里面，不然size樣式不生效；當(dāng)時(shí)很苦惱，但卻只能這樣；知道今天

【茅塞頓開(kāi)】

類似簡(jiǎn)寫(xiě)方法，其實(shí)有很多樣式都有，比如：padding、margin等，由于background包括background-size，而background-size的默認(rèn)值auto，導(dǎo)致了其失效；

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

管理情緒，情緒給我們的最大幫助就是發(fā)現(xiàn)問(wèn)題，而我們不應(yīng)該不知所措，自亂陣腳；而應(yīng)該去接觸和了解它，知道這是不是一個(gè)問(wèn)題，是問(wèn)題，如何解決呢？及時(shí)沒(méi)有立刻解決也要在大腦中留個(gè)疑問(wèn)；

靈感的來(lái)源就是自己大腦中有多少個(gè)為什么，為什么越多靈感也就越多；

?

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。