JavaScript to achieve the proportional thumbnail effect of pictures

, as follows:

code is as follows	copy code
<script type= "Text/javascript" > Window.onload = function () {     var size = 600;     var obj = document.getElementById (' img ');     if (obj.width > obj. height) {         if obj.width &G T Size) Obj.width = size;    } else {         if (obj.height > size) obj.height = si Ze    }    } </script>

Note that this solution can not specify the height and width of the picture, because the height and width is not controllable, if the specified height and width will cause picture distortion, but also can not achieve the effect of the abbreviation.

By analyzing the page thumbnails that exist in the above solution, you can adopt a solution that specifies the width and height of the picture before it is too large to cause the page to be corrupted:

The code is as follows	Copy Code

In this way, no matter how big the picture, the display is always only 1 pixels of the picture, but we need to show the normal image of the thumbnail, if you want to achieve the thumbnail image, you need to get the original original width and height, using the server to get the picture height and width:

The code is as follows	Copy Code
<?php List ($width, $height) = getimagesize (' liuhui.jpg '); ?>

Then realize the JavaScript thumbnail, through the height and width of the scale algorithm plan thumbnail display height and width, to ensure that the image display quality and effect.

The code is as follows

Copy Code

Window.onload = function () { var obj = document.getElementById (' img '); var size = 600; var _width = _height = 0; if (!obj) {return false;} var width = obj.getattribute ("w") | | Obj.offsetwidth; var height = obj.getattribute ("h") | | Obj.offsetheight; if (width >= height) { if (width>size) { _width=size; _height = parseint (size*height/width); } Obj.width = _width | | Width Obj.height = _height | | Height } if (height > width) { if (height>size) { _height=size; _width = parseint ((Size * width)/height); } Obj.height = _height | | Height Obj.width = _width | | Width } }

The implementation method is to specify the maximum width and height of a picture, and compare the width and height of the picture with the width and height of the thumbnail respectively.