開發(fā)過程中經(jīng)常會遇到如下圖的需求宫静，將商品圖片或者其他圖片變成一組正方形顯示走净，但往往我們拿到的圖片并不是正方形的，如下圖：
我們看看原圖孤里，很明顯能看到圖片受到了擠壓伏伯、變形：
這并不是我們想要的效果，那么今天就來說說解決方案捌袜，讓圖片不壓縮说搅，無論圖片是高要長一些，還是寬要長一些都能顯示出圖片核心部分的內(nèi)容虏等。最終效果如下（無論是高度還是寬度超出都沒有再進(jìn)行壓縮）：
思路：
? ? ? ? 方案一：當(dāng)圖片高度大于寬度時弄唧，將寬度設(shè)置為100%，超出的高度隱藏并垂直居中霍衫。
? ? ? ? 方案二：當(dāng)圖片寬度大于高度時候引，將高度設(shè)置為100%，超出的寬度隱藏并水平居中敦跌。
代碼實(shí)現(xiàn)：（以下代碼基于Vue）
? ? ? ? 一澄干、首先獲取圖片的寬高，判斷需要執(zhí)行哪個方案柠傍，并將結(jié)果保存麸俘。
? ? ? ? 二、根據(jù)結(jié)果綁定不同樣式携兵。
? ? ? ? 三疾掰、編寫樣式。
? ? ? ? 樣式這里說一下徐紧，拿class 'heightLong' 舉例静檬，當(dāng)圖片長度比寬度值大的時候炭懊，寬度100%長度溢出后隱藏。超出的部分自然從父元素的底部溢出拂檩。top: 50%;是父元素一半的高度侮腹，transform: translateY(50%);是圖片一半的高度，這兩個值的差就是（ （圖片高度 - 父元素高度）/ 2 稻励，也就整好是圖片垂直居中顯示頂部或底部多出來的距離）父阻。同理可得 class 'widthLong'。
/*? ? ? ? 后續(xù)更新? ? ? ? */
? ? CSS3 新屬性? ?object-fit
? ? 圖片寬高設(shè)為100%望抽；添加?object-fit:cover; （此方法圖片兩邊的長度都超過父元素寬高才停止擴(kuò)展加矛，也就是圖片短邊達(dá)到父元素邊緣才停止）
/*? ? ? ? 后續(xù)更新?? ? ? ?*/
注：有什么疑問可在評論區(qū)留言，看見了一定會回復(fù)煤篙！有不對的地方也歡迎指出斟览，大家一起學(xué)習(xí)交流！
