淘宝或者京东中，在图片列表中，图片的原始尺寸都一样，是怎么实现的？

Question

最近做一个产品列表页，前端css控制了图片的宽高，但是上线后客户反映图片变形的问题，查看原因，原来是后台上传的图片尺寸比例和自己css控制的图片尺寸比例不一样导致的。
于是自己就产看了淘宝京东等电商网站，发现图片尺寸都是统一大小或者比例的

这是通过后台上传图片时按照统一的规格进行上传，还是后台上传图片时不限制尺寸，随意上传，代码进行处理的？

Answer 1

上传商品时只需要上传一张高清的原图，服务器通过压缩技术来解决这个问题。

1. 服务器存储了多套不同尺寸的图片

2. img标签请求时在地址中增加标识，由服务器时实压缩图片

这2种方法都可以实现，后面一种的话就是多个请求会压缩多次，第一种方案就是增加硬盘的消耗。2种方案2有特点可根据自己的实际情况选择。
后面还可以增加一些优化手段，如缓存之类的。

<img data-lazy-img="done" width="130" height="130" title="【京东超市】蒙牛 纯甄 常温酸牛奶 200g*12 礼盒装" src="//img12.360buyimg.com/n1/s130x130_jfs/t3163/260/532931768/76885/977fb56c/57b9d838Nda11d3bb.jpg">

上面的标签就是京东首页商品图片地址栏中s130x130就是图片大小的标识。

Answer 2

这个你得先去尝试一下淘宝后台图片上传的过程，淘宝的图片上传其实是经过一个上传插件将所有图片都进行裁剪压缩处理了，你可以手动裁也可以自动裁，会自动换转成淘宝的一个标准比例格式。

你这个问题建议把是找个好一些的图片上传插件，在上传图片的时候就把比例控制住，在源头把控图片质量。
同时优化一下上传的操作过程及提示。用显眼的提示让用户知道一些需求。

图片上传裁剪插件这边给你推荐个免费的：http://www.w3cschool.cn/jquer...
类似于这种的上传插件会比较适用。当然如果是批量上传可以找一下图片截取脚本实现批量截取。
但是个人建议类似电商类的图片还是在PS等工具的图片处理阶段就做好尺寸比例处理会比较适合。你可以把你的网站的图片比例需求发给可以，同时建议你的图片比例尽量和淘宝等大平台比例接近，这样也方便客户素材图的复用，加强用户体验。

Answer 3

后台上传的，淘宝的也是后台上传的

Answer 4

这个是不能完全依靠程序来处理的，需要对运营人员提出相应的要求。

想要依靠程序来处理所有问题，就和企图让一个完全断电的电脑自己找到电源并且开机启动一样。

Answer 5

原图上传即可，给图片加个块包起来，给块定义规定的尺寸高宽，然后加overflow：hidden；图片的宽度就100%，高度自适应；让图片垂直居中显示裁切掉超出的两端，移动端刚遇到这个图片的问题，用此方法后能基本解决图片压缩尺寸变形的问题