Scale down a small JS Code section of the image proportionally _ Javascript tutorial
Source: Internet
Author: User
Javascript: A small JS Code section of the scaled down image. Javascript tutorial I wrote a very simple image thumbnail JS Code. Of course there are a lot of similar code on the Internet, which is really ugly here.
The main method is to write SetImgSize. js in SetImgSize. js.
1 // smart thumbnail image JS method
2 // parameter: imgID (ID of the image)
3 // parameter: maxWidth (the maximum width of the image. If the value is 0, the width is not limited)
4 // parameter: maxHeight (the maximum Image Height. If the value is 0, the image height is not limited)
5 function setImgSize (imgID, maxWidth, maxHeight)
6 {
7 var img = document. images [imgID];
8 if (maxWidth <1)
9 {
10 if (img. height> maxHeight)
11 {
12 img. height = maxHeight;
13}
14 return true;
15}
16 if (maxHeight <1)
17 {
18 if (img. width> maxWidth)
19 {
20 img. width = maxWidth;
21}
22 return true;
23}
24 if (img. height> maxHeight | img. width> maxWidth)
25 {
26 if (img. height/maxHeight)> (img. width/maxWidth ))
27 {
28 img. height = maxHeight;
29}
30 else
31 {
32 img. width = maxWidth;
33}
34 return true;
35}
36} function implementation principle is to use JS to implement micro-contraction after the image is loaded (onload event.
The following is a test file test.htm.
1
2
3
4Test
5
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
A Free Trial That Lets You Build Big!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service