这个是我在蓝色看到的，楼主想实现图片按比例缩放的功能（缩略图），把图片固定在一定的宽高范围内，不会变形，失真。
例如：缩略图的框是94px*94px，当查看缩略图的时候，图片就按比例缩放到94px*94px的框中了，而且不失真，多余的地方是白色的。就是不管宽高差多少都能按比例放到94px*94px这个框中
方法一：
javascript函数实现
<HTML> <HEAD> <script language="JavaScript"> <!-- //图片按比例缩放 var flag=false; function DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽度,允许的高度) var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ flag=true; if(image.width/image.height>= iwidth/iheight){ if(image.width>iwidth){ ImgD.width=iwidth; ImgD.height=(image.height*iwidth)/image.width; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt=image.width+"×"+image.height; } else{ if(image.height>iheight){ ImgD.height=iheight; ImgD.width=(image.width*iheight)/image.height; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt=image.width+"×"+image.height; } } } //--> </script> </HEAD> <body> <div style="width:230px;height:230px;"> <img src="/images/logo.gif" onload="javascript:DrawImage(this,100,200);" width="200" height="200" border="0" /> </div> </body> </HTML> [提示：你可先修改部分代码，再按运行]
一组图片按比例缩放js代码，有上一张，下一张的功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>按比例缩放</title> <style type="text/css"> body{ font:12px "宋体"; color:#fff; background:#000} #box{ width:94px; height:94px; padding:2px; border:1px solid #f60; background:#fff} a{ color:#fff; text-decoration:none; line-height:30px} a:hover{ color:#f60;} </style> <script type="text/javascript"> var size = [94,94]; var tArr = ["http://img.ent.tom.com/images/pics/060625gangjie/d/20.jpg","http://image2.sina.com.cn/ent/v/p/2006-07-10/U1513P28T3D1153006F326DT20060710183021.jpg","http://image2.sina.com.cn/ent/s/p/2006-07-12/U1513P28T3D1155082F326DT20060712103006.jpg"] var g = function(obj) {return document.getElementById(obj)} function getImg(i) { g("box").innerHTML = ""; var tmp = new Image(); var mu = g("mu").getElementsByTagName("A"); mu[0].onclick = null; mu[1].onclick = null; tmp.onload = function() { var w = this.width; var h = this.height; if (w/h>size[0]/size[1]) { this.width = size[0]; this.height = size[0]/w*h } else { this.height = size[1]; this.width = size[1]/h*w; } this.i = i; this.style.cursor = "pointer" this.onclick = function() { var timg = new Image(); timg.src = tArr[this.i]; g("big").innerHTML = ""; g("big").appendChild(timg); } var l1 = (size[1] -this.height)/2; var l2 = (size[0]-this.width)/2; g("box").style.padding = l1 + "px,0,0," + l2 + "px"; g("box").style.height = size[1]-l1; g("box").style.width = size[0]-l2; g("box").appendChild(this) } tmp.src = tArr[i]; if (i>0) { mu[0].onclick = function() { getImg(i-1); return false; } } else {mu[0].onclick = function(){return false;}} if (i<tArr.length-1) { mu[1].onclick = function() { getImg(i+1); return false; } } else {mu[1].onclick = function(){return false;}}; } window.onload = function() { getImg(0); } </script> </head> <body> <div id="box"></div> <div id="mu"><a href="#">上一张</a> <a href="#">下一张</a></div> <div id="big"></div> </body> </html> [提示：你可先修改部分代码，再按运行]
方法2：css样式实现
代码少，原来css也能做到
<style type="text/css"> .PreviewImage { max-width: 200px; max-height: 200px; } * html .PreviewImage { width: expression(this.width > 100 && this.width > this.height ? 100 : auto); height: expresion(this.height >100 ? 100 : auto); } </style> <img src="/images/logo.gif" border="0" class="PreviewImage"/> [提示：你可先修改部分代码，再按运行]
请稍等，评论加载中...
请稍等，评论加载中...