最近有個需求是上傳圖片后，并等比例裁剪顯示。接到這個需求后，和后端先做了技術方案討論，因為上傳是上傳一組6張照片，我借助iview的upload組件來完成圖片上傳：

1.選擇圖片后，點擊按鈕，把圖片地址上傳到后端指定的接口，后端返回一個url和圖片的width和height，前端接收后 存入一個數組中。這里有個小小的坑需要注意一下，應該之前的其他接口 header中的content-type 都是 application/json 協定好的，但是后端在處理圖片格式只能采取multipart/form-data格式來接收，那我們只能在當前模板中改一下content-type，像這樣.

2.圖片上傳完成后，有個等比裁剪縮放的需求，根據具體業務這里會有兩種情況：

I.手機正常豎著拍照，照片會是375*667px 我們會取圖片中間240*180的部分，這樣的話會造成兩邊空白的情況，如圖，這樣肯定是不行的，理想情況是圖片自動拉伸填滿整個紅色區域，并且圖片不變形。

II.手機橫著拍照，照片會是667*375px 剛好符合我們的需求，我們只用做等比例縮小就可以了，如圖。

我原本的做法是給img標簽添加onload事件，待圖片加載完成后根據js算法來處理，具體代碼:

setOfCertificationsImg (index) {

let pictureSize = document.getElementsByClassName('pictureSize')

let item = pictureSize[index]

let width = 244

let height = 162

let oldWidth = item.width

let oldHeight = item.height

let scale = Math.max(width / oldWidth, height / oldHeight)

let newWidth = oldWidth * scale

let newHeight = oldHeight * scale

this.$set(this.styleOfCertifications, index, {

width: Math.round(newWidth) + 'px',

height: Math.round(newHeight) + 'px',

left: Math.round((width - newWidth) / 2) + 'px',

top: Math.round((height - newHeight) / 2) + 'px'

})

},

onImgLoad (index) {

console.log('on image load: ' + index)

this.setOfCertificationsImg(index)

}

新舊寬相除，新舊高相除，算出一個比例，在根據上傳圖片大小來進行position位移。但是這種做法會造成一個bug，在單個圖片的處理上，是正常的，上傳完畢后裁剪正常。但是存在一個數組中，連續處理6張圖片的時候，前五張是處理好的的但最后一張是變形圖片。應該是圖片處理也需要時間，在顯示前若圖片沒有計算完成則會變形，最后我采取設置setTimeout時間來處理，也可以用promise。

但是！！！重點來了，一個偶然的發現，css3中有個屬性object-fit出現在我眼前，我們來看一下MDN上是怎么定義這個屬性的:

The object-fit CSS property specifies how the contents of a replaced element, such as an <img> or <video>, should be resized to fit its container.

翻譯過來就是，對象CSS屬性指定替換元素的內容（如<img>）應如何調整大小以適合其容器。

object-fit具體有5個值, object-fit: fill; object-fit: contain; object-fit: cover; object-fit: scale-down; 還有none.

在這里我們用到了object-fit: cover; 被替換的內容大小保持其縱橫比，同時填充元素的整個內容框。如果對象的寬高比與其長寬比不匹配，則對象將被剪裁以適合其寬高比。

完美解決圖片的裁剪縮放問題！僅1行代碼解決了30行代碼的事！完美！

總結

以上是生活随笔為你收集整理的css之object-fit的全部內容，希望文章能夠幫你解決所遇到的問題。

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