您的位置：首页 > Web前端 > JavaScript

用 JavaScript 实现网页图片等比例缩放

2011-11-09 10:52 801 查看

思路:

高度都控制在160像素以内，如果是160像素以内的话，就直接显示；

如果高度大于宽度，高度优先缩小在160以内，宽度根据高度的缩放比缩小；反之亦然

1.在处理网页图片时，特别是一些图片列表的应用里面，很难保证图片统一大小，直接设置图片大小又会导致图片拉伸，造成图片模糊，本文介绍的代码可以在图片加载完成后自动按比例调整图片大小。

Javascript代码:

<script language="JavaScript" type="text/javascript">



</script>

<img src="../images/index_default.png" alt="自动缩放后的效果" onload="javascript:DrawImage(this,200,200);" /> <br />

2.<!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>

<title>图片自适应</title>

<meta name="Generator" content="EditPlus">

<meta name="Author" content="dinstone">

<meta name="Keywords" content="图片,缩放,查看大图,居中">

<meta name="Description" content="图片缩放到指定大小，对于缩放过的图片，单击查看大图">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

body

{

margin: 0;

padding: 0;

border: 1px solid #333;

}

.ldiv

{

width: 300px;

border: 1px solid #333;

}

</style>

<script language="JavaScript">

</script>

</head>

<body>

<div class="ldiv">

<p>

图片超出限制尺寸时，自动缩小到指定尺寸范围内，点击后图片后在本页面显示原尺寸图片。</p>

<img src="../images/1.jpg"

onload="adapt(this,300,160,1)" /></div>

<div class="ldiv">

<p>

图片超出限制尺寸时，自动缩小到指定尺寸范围内，点击后图片后在本页面显示原尺寸图片。</p>

<img src="../images/1.jpg"

onload="adapt(this,300,160,0)" /></div>

<div class="ldiv">

<p>

图片超出限制尺寸时，自动缩小到指定尺寸范围内，点击后图片后在本页面显示原尺寸图片。</p>

<img src="../images/t1.jpg"

onload="adapt(this,300,160,5)" /></div>

</body>

</html>

3.javascript 根据图片实际比例进行缩放, 并居中显示, 用到jQuery

<html>

<head>

<title>根据图片实际比例进行缩放</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="study/global.js"></script>

<meta http-equiv='Content-Type' content='text/html; charset=gb2312' />

<style>body{font-size:12px;}</style>

</head>

<body>

<p id="pic" style=" width:550px; height:500px; border:solid 1px #f60; overflow:hidden;">

<img src="../images/20113628023622599.jpg" align="center" height=""/>

</p>

<input type="button" value="生成CMD" id="go" onclick="PicUtil.fixCenter($('#pic'))" />

<br><br>

<div id="msg"></div>

<script>

var PicUtil={

cacheImg:$('<img />'),

//以容器为基准, 根据图片实际比例进行缩放

fixCenter:function(box){

var img=$("img",$(box));

if(img.size()>0){

var o = this.getProperty(img[0]);

if(o.wf>o.w0 && o.hf>o.h0){

this.fixOnly(box);

}else if(o.wf<o.w0 || o.hf<o.h0){

img.width(o.wf).height(o.hf);

if(o.hp>o.hf) $("<div style='clear:both;width:1px;height:+((o.hp-o.hf)/2)+px'></div>").insertBefore(img);

if(o.wp>o.wf) $(box).css("text-align","center");

}

}

},

fixOnly:function(box){

var img=$("img",$(box));

if(img.size()>0){

$(box).css({"background-image":"url("+img[0].src+")","background-repeat":"no-repeat","background-position":"center"}).empty();

}

},

getProperty:function(img){

if(!img || !img.src) return {};

var tmpImg=this.cacheImg;

tmpImg[0].src=img.src+"";

var parent=$(img).parent();

var rs={w0:tmpImg[0].width,h0:tmpImg[0].height,w:img.width,h:img.height,wp:parent.width(),hp:parent.height()};

if(rs.w0==0 || rs.h0==0) return {};

rs.wf=Math.floor(rs.h0/rs.w0*rs.wp)>rs.hp?(Math.floor(rs.w0/rs.h0*rs.hp)):rs.wp;

rs.hf=Math.floor(rs.h0/rs.w0*rs.wp)>rs.hp?rs.hp:Math.floor(rs.h0/rs.w0*rs.wp);

return rs;

}

}

function msg(x,y){

if(!y) $("#msg").html(x); else $("#msg").html(x+"<br>"+$("#msg").html());

}

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航