Home > Web Front-end > JS Tutorial > body text

Perfect picture scaling_javascript skills

WBOY
Release: 2016-05-16 19:26:23
Original
940 people have browsed it

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.

Copy code The code is as follows:

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.
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!