img標籤實現和背景圖一樣的顯示效果——object-fit和object-position

不知大家在做前端頁面的時候，有沒有遇到類似這樣的問題：有一個不是正方形的圖片，可能是寬度大於高度的，也可能是高度大於寬度的，而你又並不想用背景圖的方式來做，要實現用img標籤來讓此圖片顯示出一個正方形的且不變形的效果。即如下圖：只顯示圖片中間部分（紅框部分）   下面我們便來簡單討論如何實現讓長方形圖片顯示出正方形的效果，首先我們本次討論中用到的兩張圖片的原圖就是上面的兩張圖片（一張寬度大於高度，

>>阅读原文<<