When I work in a company, I often have to create product display pages for customers. Since the images uploaded by customers are in different formats, they will be deformed after scaling. So I took some time on Sunday and wrote a piece of JS code to support the perfect scaling of the images.
First add a
tag pair to the image. The height or width cannot be defined in img, as follows:
Write code in CSS: .product_img_div {width:210px;height:190px;overflow:hidden}
The function is to control the loading of images , the overflow part is hidden, so that the interface will not be too ugly.
ReSizeImg("product_img",200,180);
function ReSizeImg(cName,w,h){
var reImgs = document.getElementsByTagName("img");
for (j=0;j if (reImgs[ j].className==cName && (reImgs[j].height>h || reImgs[j].width>w)) {
{
reImgs[j].height=h;reImgs[j].width=w;
} else if (reImgs[j].height>reImgs[j].width) {
reImgs[j ].height=h;
} else if (reImgs[j].height }
}
After the test, the image size was scaled perfectly, which also solved the problem of making the interface ugly when loading.