位置：首页>> 网络编程>> 网页设计>> 几个图片按比例缩放的代码

几个图片按比例缩放的代码

　来源：asp之家　发布时间：2008-02-13 08:51:00　

标签：缩放,图片,代码

这个是我在蓝色看到的，楼主想实现图片按比例缩放的功能（缩略图），把图片固定在一定的宽高范围内，不会变形，失真。

例如：缩略图的框是94px*94px，当查看缩略图的时候，图片就按比例缩放到94px*94px的框中了，而且不失真，多余的地方是白色的。就是不管宽高差多少都能按比例放到94px*94px这个框中

方法一：

javascript函数实现

<HTML><HEAD><script language="JavaScript">  </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>

<!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也能做到

投稿

几个图片按比例缩放的代码

猜你喜欢