我這邊的功能是
會有個前端後台可以上傳商品及多張照片 (一個商品綁定多個照片)
前端會顯示商品列表
於是我參考 zara 的作法
https://www.zara.com/tw/en/kids-boy-tshirts-l286.html?v1=1310655
仔細研究後發現真的是另一門學問....
他列表照片會根據螢幕放大縮小
所以他並沒有鎖定照片的"高度"?
因此必須在上傳照片時就必須先聲明寬度多少高度多少? (他列表每張照片"原始圖"都是一樣寬高的)
要不就是裁切，要不就是直接檢查照片寬高?
我不清楚這是不是它們的真正作法...強制裁切這應該有點困難?
一張照片應該至少會有多種SIZE?
給手機看的、前端後台看的、電腦版看的、列表看的....這應該是必須要做的事?
主要還是沒辦法控制客戶怎麼上傳，上傳的照片是否符合比例...假設照zara作法前端不鎖定照片高度然後直接排列，這可能是場災難?
懇請電商大師指教....感謝
已邀請的邦友 {{ invite_list.length }}/5
1 .
略
不過稍微提一下
在圖片 request url 中的 .../w/(value)/...
修改此處的 vaule
會回傳不同解析度的圖片
e.g.
https://static.zara.net/photos///2019/I/0/3/p/3860/782/400/2/w/1920/3860782400_1_1_1.jpg?ts=1559719973394
https://static.zara.net/photos///2019/I/0/3/p/3860/782/400/2/w/720/3860782400_1_1_1.jpg?ts=1559719973394
2 .
一般情況
基本的 bootstrap grid rwd 就有不錯的效果
3 .
沒用過這 module
不過基本上你的問題應該跟圖片格式沒啥關係
我是覺得你要參考的話
也應該拿 shopee 這種 C2C 的網站來參考
ZARA 看起來是屬於 B2C
搞不好你想破頭的圖片裁切問題
zara 其實是靠他們的美術來產出不同解析度的商品圖片
根本不是靠程式裁切
既然原圖都是一樣"大小",
那也許在上傳的時候就有限制了,
或是用一些方法把所有圖片轉成一樣大小,
(但若比例不對會變形, 通常應該是規定上傳的大小)
另外大小會變並不是"不設定寬高",
RWD本身就可以做到這件事.
其實主要這種圖片都是使用套件來作處理，本身是使用c#, php需要另外找
如open source 的imageprocessor
https://imageprocessor.org/
https://imageprocessor.org/imageprocessor-web/imageprocessingmodule/resize/
原則上原圖上傳可以不限制尺寸大小甚至於圖片規格jpg, png ...常見都可以
前端在顯示時，只要於圖片後面加上參數即可達到即時的調整尺寸，甚至可以加上各式效果濾鏡
https://imageprocessor.org/imageprocessor-web/imageprocessingmodule/resize/
https://imageprocessor.org/imageprocessor-web/imageprocessingmodule/pixelate/
再搭配css的srcset , 就可以自適應不同的尺寸大小來動態處理圖片。
這種也可以單獨架為一個圖床，獨立一個服務器，前端需要時圖片都向他取得顯示即可。
所有圖片都是直接即時動態後端裁切至最適大小，不會浪費流量，且後端有cache機制，相同圖片相同尺寸參數不會重覆裁切，性能也不受影響。
iThome鐵人賽
看影片追技術