開發(fā)過程中經(jīng)常會遇到如下圖的需求，將商品圖片或者其他圖片變成一組正方形顯示，但往往我們拿到的圖片并不是正方形的，如下圖：

問題圖片

我們看看原圖，很明顯能看到圖片受到了擠壓、變形：

原圖

這并不是我們想要的效果，那么今天就來說說解決方案，讓圖片不壓縮，無論圖片是高要長一些，還是寬要長一些都能顯示出圖片核心部分的內(nèi)容。最終效果如下（無論是高度還是寬度超出都沒有再進(jìn)行壓縮）：

最終效果圖

思路：

? ? ? ? 方案一：當(dāng)圖片高度大于寬度時，將寬度設(shè)置為100%，超出的高度隱藏并垂直居中。

? ? ? ? 方案二：當(dāng)圖片寬度大于高度時，將高度設(shè)置為100%，超出的寬度隱藏并水平居中。

代碼實(shí)現(xiàn)：（以下代碼基于Vue）

? ? ? ? 一、首先獲取圖片的寬高，判斷需要執(zhí)行哪個方案，并將結(jié)果保存。

綁定

獲取元素高寬哪個更長的結(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í)交流！