javascript实现图片缩略最简单的方式是在页面加载完后调用加载一个图片缩略事件，通过指定一个宽度或高度的最大值，判断图片的宽度与高度不超过最大值的前提，这样就能实现图片的自动缩略
，如下：
| 代码如下 |
|
|
<img src="liuhui.jpg" id="img">
<script type="text/javascript">
window.onload = function(){
var size = 600;
var obj = document.getElementById('img');
if (obj.width > obj .height) {
if (obj.width > size) obj.width = size;
} else {
if (obj.height > size) obj.height = size;
}
}
</script>
|
注意采用这种方案不能指定图片的高度与宽度，因为高度与宽度不可控，如果指定高度与宽度就会造成图片变形，同时也不能实现缩略的效果。
通过分析上面解决方案存在的页面缩略处理之前由于图片太大造成页面破坏的问题，可以采取这样一种解决方案，先指定图片的宽度与高度，如下：
| 代码如下 |
|
|
<img src="liuhui.jpg" id="img" height="1" width="1">
|
这样，不管图片有多大，显示永远只是1个像素的图片，但我们需要显示缩略的正常图片，如果要实现图片的缩略，就需要获取原图的宽度与高度，采用服务端获取图片高度与宽度：
| 代码如下 |
|
|
<?php
list($width,$height) = getimagesize ('liuhui.jpg');
?>
<img src="liuhui.jpg" id="img" height="1" width="1" w="$width" h="$height" >
|
然后实现javascript缩略，通过高度与宽度的比例算法计划缩略后的显示高度与宽度，保证图片显示的质量与效果。
| 代码如下 |
|
|
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;
}
}
|
实现方法是指定一个图片的宽度与高度的最大值，并与图片的宽度与高度比较，通过比例分别计算缩略的图片宽度与高度。
