javascript - On Taobao or JD.com, in the picture list, the original size of the pictures is the same. How to achieve this?

I recently made a product list page. The front-end CSS controlled the width and height of the image. However, after going online, customers reported the problem of image deformation. After checking the reason, it turned out that the size ratio of the image uploaded in the background was different from the image size ratio controlled by my own CSS. .
So I looked at e-commerce websites such as Taobao, JD.com, and found that the image sizes are all of the same size or proportion

Is this uploading images in accordance with unified specifications through the background, or is there no size limit when uploading images in the background and can be uploaded at will and processed by code?

Reply content:

I recently made a product list page. The front-end CSS controlled the width and height of the image. However, after going online, customers reported the problem of image deformation. After checking the reason, it turned out that the size ratio of the image uploaded in the background was different from the image size ratio controlled by my own CSS. .
So I looked at e-commerce websites such as Taobao, JD.com, and found that the image sizes are all of the same size or proportion

Is this uploading images in accordance with unified specifications through the background, or is there no size limit when uploading images in the background and can be uploaded at will and processed by code?

When uploading products, you only need to upload a high-definition original image, and the server solves this problem through compression technology.

1. The server stores multiple sets of pictures of different sizes

2. Add an identifier to the address when requesting the img tag, and the server will compress the image in real time

Both of these two methods can be implemented. In the latter case, multiple requests will be compressed multiple times. The first method is to increase the consumption of the hard disk. The 2 options 2 have characteristics and can be chosen according to your actual situation.
Some optimization methods can be added later, such as caching.

<code><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"></code>

The tag above is the image size in the address bar of the product image on JD.com’s homepage. s130x130 is the image size.

Uploaded in the background, Taobao is also uploaded in the background

This cannot be handled entirely by relying on the program, and corresponding requirements need to be put forward for the operating personnel.

Trying to rely on programs to handle all problems is the same as trying to make a completely power-off computer find its own power source and start up.

You have to try the Taobao background image uploading process first. Taobao image uploading actually uses an upload plug-in to crop and compress all images. You can crop manually or automatically, and it will be automatically converted to Taobao. A standard proportional format.

For your question, I suggest you find a better image upload plug-in, control the proportion when uploading images, and control the image quality at the source.
At the same time, optimize the upload operation process and tips. Use conspicuous prompts to let users know some requirements.

I recommend a free image upload and cropping plug-in: http://www.w3cschool.cn/jquer...
An upload plug-in similar to this will be more suitable. Of course, if you are uploading in batches, you can find an image interception script to implement batch interception.
However, I personally suggest that for images similar to e-commerce, it would be more suitable to handle the size ratio in the image processing stage of tools such as PS. You can send us the image ratio requirements for your website. It is also recommended that your image ratio be as close as possible to the ratio of large platforms such as Taobao. This will also facilitate the reuse of customer material images and enhance the user experience.