图片按比例进行缩放js代码

<div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div>
<script type="text/javascript" >

//缩放图片到合适大小
function ResizeImages()
{
   var myimg,oldwidth,oldheight;
   var maxwidth=550;
   var maxheight=880
   var imgs = document.getElementById('article').getElementsByTagName('img');   //如果你定义的id不是article,请修改此处

   for(i=0;i<imgs.length;i++){
     myimg = imgs[i];

     if(myimg.width > myimg.height)
     {
         if(myimg.width > maxwidth)
         {
            oldwidth = myimg.width;
            myimg.height = myimg.height * (maxwidth/oldwidth);
            myimg.width = maxwidth;
         }
     }else{
         if(myimg.height > maxheight)
         {
            oldheight = myimg.height;
            myimg.width = myimg.width * (maxheight/oldheight);
            myimg.height = maxheight;
         }
     }
   }
}
//缩放图片到合适大小
ResizeImages();
</script>
<p>查找更多代码,请访问:<a href="http://www.111cn.net" target="_blank">中国WEB第一站</a></p>

时间: 2024-11-19 01:51:48

图片按比例进行缩放js代码的相关文章

关于图片按比例自适应缩放的js代码_图象特效

如下图. 瞄了一下,居中可以用 text-align:center; 来实现.而按比例缩放,利用预设 <img /> 的 width .height 属性解决不了.因为用户图片可能是很长的,也可能是很宽的.在线上想了一下他们的关系,按条件来判断是这样的: 复制代码 代码如下: if(实际宽度 > 预览最大宽度) { 缩放宽度 = 预览最大宽度 } if(实际高度 > 预览最大高度) { 缩放高度 = 预览最大高度 } 但是这样会有问题,比如当宽度和高度都被缩放,如果缩放比较不同,图

JS网页图片按比例自适应缩放实现方法_javascript技巧

用户上传照片,照片的尺寸未知:需要生成一个预览,这个预览图要根据提供给用户预览的区域自应用,并且居中:如果图片太大,需要按比例缩放.如下图. 瞄了一下,居中可以用 text-align:center; 来实现.而按比例缩放,利用预设 <img /> 的 width .height 属性解决不了.因为用户图片可能是很长的,也可能是很宽的.在线上想了一下他们的关系,按条件来判断是这样的: if(实际宽度 > 预览最大宽度) {    缩放宽度 = 预览最大宽度} if(实际高度 > 预

图片按比例自动伸缩效果代码

图片按比例自动伸缩效果代码 <script> function resizepic(thispic) { if(thispic.width>570) thispic.width=570; } function bbimg(o) {   var zoom=parseInt(o.style.zoom, 10)||100;   zoom+=event.wheelDelta/12;   if (zoom>0) o.style.zoom=zoom+'%';   return false; }

按比例微缩图片的一段小小的JS代码

js          自己写的一个非常简单的图片微缩JS代码,当然网上有很多类似的代码,在此确实是献丑了.         主要方法写在SetImgSize.js里面 SetImgSize.js 1 //智能微缩图片JS方法 2 //参数:imgID(图片的标识ID) 3 //参数:maxWidth(图片的最大宽度,值为0则表示不限制宽度) 4 //参数:maxHeight(图片的最大高度,值为0则表示不限制高度) 5 function setImgSize(imgID,maxWidth,ma

[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病,总感觉不完美,心里一直惦记着那件事,也是在我写过那篇文章之后,没多久,在博客园首页看到了一篇文章较复杂js的书写格式,这里的代码看着比较简介,就想着抽时间将之前的那段js代码进行重构.说做就做,不想一想起之前写过那样的代码,心里就有疙瘩.所以也就有了这篇文章. $.extend 在开始重构之前,需要先学习一

鼠标放在图片上显示大图的JS代码_javascript技巧

显示大图和隐藏大图的js代码: 复制代码 代码如下: <script type="text/javascript">   //显示图片   function over(imgid,obj,imgbig)   {//大图显示的最大尺寸  4比3的大小  400 300maxwidth=400;maxheight=300; //显示        obj.style.display="";        imgbig.src=imgid.src;      

图片按比例缩小(css强制)js代码

<html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>图网页特效代码</title> <style> <!-- ,很多情况下,不用这种方法,会增加ie负荷.--&

图片等比例缩放js代码

<script language="网页特效" type="text/javascript"> //改变图片大小 function resizepic(thispic) { if(thispic.width>600){thispic.height=thispic.height*600/thispic.width;thispic.width=600;} } //无级缩放图片大小 function bbimg(o) {   var zoom=parse

网页图片延时加载的js代码_javascript技巧

实现原理  把所有需要延时加载的图片改成如下的格式: <img lazy_src="图片路径" border="0"/> 然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片) 代码 lazyLoad=(function() { var map_element = {}; var e