javascript - 電商網站列表頁中圖片的展示，通常是透過什麼方法防止圖片變形的？

我想問一下，類似電商的產品清單頁中，一般怎麼防止圖片變形？呢，我看了天貓京東，發現圖片的原尺寸比例都是一樣的，難道是統一規定後台上傳圖片的尺寸比例嗎？

回覆內容：

我想問一下，類似電商的產品清單頁中，一般怎麼防止圖片變形？呢，我看了天貓京東，發現圖片的原尺寸比例都是一樣的，難道是統一規定後台上傳圖片的尺寸比例嗎？

如果能保證上傳的圖片尺寸比例與顯示區域的尺寸比例一致，自然是上策（透過技術+管理制度實現）。
如果無法保證這一點，可以將圖片作為顯示區域的背景圖來呈現。設定background-size值為cover可確保不失真的情況下，完全覆蓋顯示區域，且盡可能多的顯示圖片內容。

1、上傳圖片時限制圖片尺寸比例
2、上傳後處理圖片尺寸比例，如果圖片比例不對會變形
3、顯示圖片時進行處理，居中顯示圖片或使圖片完全覆蓋顯示區域

其實比較經濟，且相容性不錯的方案是在上傳的時候限制規格，並且設計人員在設計頁面的時候展示圖片的地方大多會同比放大或者縮小。這是我個人覺得比較經濟的做法。

如果使用bacnground-size:屬性的話在國內的情況下向下兼容並不是太好，而且這樣做在有的情況下同樣會變形失貞。