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.
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn