javascript - 电商网站列表页中图片的展示，一般是通过什么方法防止图片变形的？

我想问一下，类似于电商的产品列表页中，一般怎么防止图片变形？呢，我看了天猫京东，发现图片的原尺寸比例都是一样的，难道是统一规定后台上传图片的尺寸比例吗？

回复内容：

我想问一下，类似于电商的产品列表页中，一般怎么防止图片变形？呢，我看了天猫京东，发现图片的原尺寸比例都是一样的，难道是统一规定后台上传图片的尺寸比例吗？

如果能保证上传的图片尺寸比例与显示区域的尺寸比例一致，自然是上策（通过技术+管理制度实现）。
如果无法保证这一点，可以将图片作为显示区域的背景图来进行呈现。设定background-size值为cover可保证不失真的情况下，完全覆盖显示区域，且尽可能多的显示图片内容。

1、上传图片时限制图片尺寸比例
2、上传后处理图片尺寸比例，如果图片比例不对会变形
3、显示图片时进行处理，居中显示图片或使图片完全覆盖显示区域

其实比较经济，且兼容性不错的方案是在上传的时候限制规格，并且设计人员在设计页面的时候展示图片的地方大多会同比放大或者缩小。这是我个人觉得比较经济的做法。

如果使用bacnground-size:属性的话在国内的情况下向下兼容并不是太好，而且这样做在有的情况下同样会变形失贞。