javascript - When displaying images on e-commerce website list pages, what methods are generally used to prevent image deformation?

I would like to ask, on a product list page similar to that of e-commerce, how do you generally prevent images from being deformed? Well, I looked at Tmall and JD.com and found that the original size ratio of the pictures is the same. Is it a unified rule for the size ratio of the pictures uploaded in the background?

Reply content:

I would like to ask, on a product list page similar to that of e-commerce, how do you generally prevent images from being deformed? Well, I looked at Tmall and JD.com and found that the original size ratio of the pictures is the same. Is it a unified rule for the size ratio of the pictures uploaded in the background?

If you can ensure that the size ratio of the uploaded image is consistent with the size ratio of the display area, it is naturally the best strategy (achieved through technology + management system).
If this cannot be guaranteed, the image can be presented as the background image of the display area. Setting the background-size value to cover can ensure that the display area is completely covered without distortion and that as much of the image content as possible is displayed.

1. Limit the picture size ratio when uploading pictures
2. Process the picture size ratio after uploading. If the picture ratio is wrong, it will be deformed
3. Process the picture when displaying it, display the picture in the center or make the picture completely cover the display area

In fact, a more economical and compatible solution is to limit the specifications when uploading, and when designers design the page, most of the places where pictures are displayed will be enlarged or reduced year-on-year. This is a more economical approach that I personally think.

If you use the bacnground-size: attribute, backward compatibility is not very good in domestic situations, and doing so will also deform and lose virginity in some cases.