javascript - 淘寶或京東中，在圖片清單中，圖片的原始尺寸都一樣，是怎麼實現的？

最近做一個產品列表頁，前端css控制了圖片的寬高，但是上線後客戶反映圖片變形的問題，查看原因，原來是後台上傳的圖片尺寸比例和自己css控制的圖片尺寸比例不一樣導致的。
於是自己就產看了淘寶京東等電商網站，發現圖片尺寸都是統一大小或比例的

這是透過後台上傳圖片時按照統一的規格進行上傳，還是後台上傳圖片時不限制尺寸，隨意上傳，程式碼進行處理的？

回覆內容：

最近做一個產品列表頁，前端css控制了圖片的寬高，但是上線後客戶反映圖片變形的問題，查看原因，原來是後台上傳的圖片尺寸比例和自己css控制的圖片尺寸比例不一樣導致的。
於是自己就產看了淘寶京東等電商網站，發現圖片尺寸都是統一大小或比例的

這是透過後台上傳圖片時按照統一的規格進行上傳，還是後台上傳圖片時不限制尺寸，隨意上傳，程式碼進行處理的？

上傳商品時只需要上傳一張高畫質的原圖，伺服器透過壓縮技術來解決這個問題。

1. 伺服器儲存了多套不同尺寸的圖片

2. img標籤請求時在位址中增加標識，由伺服器時實壓縮圖片

這2種方法都可以實現，後面一種的話就是多個請求會壓縮多次，第一種方案就是增加硬碟的消耗。 2種方案2有特點可依自己的實際情況選擇。
後面還可以增加一些最佳化手段，如快取之類的。

<code><img  src="/static/imghwm/default1.png" data-src="//img12.360buyimg.com/n1/s130x130_jfs/t3163/260/532931768/76885/977fb56c/57b9d838Nda11d3bb.jpg" class="lazy" data-lazy-img="done"    style="max-width:90%"  style="max-width:90%" title="【京东超市】蒙牛 纯甄 常温酸牛奶 200g*12 礼盒装" alt="javascript - 淘寶或京東中，在圖片清單中，圖片的原始尺寸都一樣，是怎麼實現的？" ></code>

上面的標籤就是京東首頁商品圖片網址列中s130x130就是圖片大小的標誌。

後台上傳的，淘寶的也是後台上傳的

這個是不能完全依賴程序來處理的，需要對營運人員提出相應的要求。

想要依靠程式來處理所有問題，就和企圖讓一個完全斷電的電腦自己找到電源並且開機啟動一樣。

這個你得先去嘗試一下淘寶後台圖片上傳的過程，淘寶的圖片上傳其實是經過一個上傳插件將所有圖片都進行裁剪壓縮處理了，你可以手動裁也可以自動裁，會自動換成淘寶的一個標準比例格式。

你這個問題建議把是找個好一些的圖片上傳插件，在上傳圖片的時候就把比例控制住，在源頭把控圖片品質。
同時優化上傳的操作流程及提示。用顯眼的提示讓使用者知道一些需求。

圖片上傳裁剪插件這邊給你推薦個免費的：http://www.w3cschool.cn/jquer...
類似於這種的上傳插件會比較適用。當然如果是批次上傳可以找一下圖片截取腳本實現批次截取。
但個人建議類似電商類的圖片還是在PS等工具的圖片處理階段就做好尺寸比例處理會比較適合。你可以把你的網站的圖片比例需求發給可以，同時建議你的圖片比例盡量和淘寶等大平台比例接近，這樣也方便客戶素材圖的複用，加強用戶體驗。