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

问题描述

问 题

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

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

解决方案

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

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就是图片大小的标识。

这篇关于css - 淘宝或者京东中，在图片列表中，图片的原始尺寸都一样，是怎么实现的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！