JS控制图片等比例缩放的示例代码

代码如下:

<SCRIPT language="JavaScript">
function DrawImage(ImgD,FitWidth,FitHeight){  
    var image=new Image();  
    image.src=ImgD.src;  
    if(image.width>0 && image.height>0){  
        if(image.width/image.height>= FitWidth/FitHeight){  
            if(image.width>FitWidth){  
                ImgD.width=FitWidth;  
                ImgD.height=(image.height*FitWidth)/image.width;  
            }  
            else{  
                ImgD.width=image.width;  
                ImgD.height=image.height;  
            }  
        }  
        else{  
            if(image.height>FitHeight){  
                ImgD.height=FitHeight;  
                ImgD.width=(image.width*FitHeight)/image.height;  
            }  
            else{  
                ImgD.width=image.width;  
                ImgD.height=image.height;  
            }  
        }  
    }  
}

</script>

调用方法：


代码如下:

<a href="admin/<? echo $rscase['path']?>" target="_blank"><img src="admin/<? echo $rscase['path']?>" alt="点击放大图片" width="180" height="180" onload='javascript:DrawImage(this,180,);' hspace="3" vspace="3" border="0" /></a>

赞 (0)

相关推荐

  • jQuery实现等比例缩放大图片让大图片自适应页面布局

    在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止"

  • jquery 图片预加载 自动等比例缩放插件

    jquery 图片预加载 自动等比例缩放插件

    复制代码 代码如下: /* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比例自动缩放 width 图片最大

  • 用jquery实现等比例缩放图片效果插件

    复制代码 代码如下: jQuery.fn.autoZoomLoadImage = function(scaling, width, height, loadPic) { if (loadPic == null) loadPic = "Loading.gif"; return this.each(function() { var t = $(this); var src = $(this).attr("src"); var img = new Image(); //a

  • PHP图片等比例缩放生成缩略图函数分享

    复制代码 代码如下: <?php    /*    *@im     //需要缩放的图片资源    *@filetype //制作的缩略图文件类型    *@dstimW   //缩放的图片的宽度    *@dstimH  //缩放的图片的高度    *@thumbname //缩略图文件名字function makethumb($im,$dstimW,$dstimH,$thumbname ,$filetype){            //获取im的宽度和高度        $pic_W=im

  • JavaScript实现网页图片等比例缩放实现代码及调用方式

    在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小. Javascript: 复制代码 代码如下: < script language="javascript" type="text/javascript"> < !-- // 说明:用 JavaScript 实现网页图片等比例缩放 // 整理:http://www.CodeB

  • php缩放图片(根据宽高的等比例缩放)实例介绍

    推荐一个简单实用的缩放图片工具 SimpleImage,参考http://www.white-hat-web-design.co.uk/blog/resizing-images-with-php/ 使用方法: 设定宽高,不等比例缩放 复制代码 代码如下: <?php include('SimpleImage.php'); $image = new SimpleImage(); $image->load('picture.jpg'); $image->resize(250,400); $i

  • js 图片等比例缩放代码

    复制代码 代码如下: var scaleImage = function(o, w, h){ var img = new Image(); img.src = o.src; if(img.width >0 && img.height>0) { if(img.width/img.height >= w/h) { if(img.width > w) { o.width = w; o.height = (img.height*w) / img.width; } else

  • php实现图片等比例缩放代码

    新建文件index.php,需要在统计目录下有个图片为q.jpg(可根据源码进行更改图片的名称) 源代码如下: <?php $filename="q.jpg"; $per=0.3; list($width, $height)=getimagesize($filename); $n_w=$width*$per; $n_h=$height*$per; $new=imagecreatetruecolor($n_w, $n_h); $img=imagecreatefromjpeg($fi

  • JS控制图片等比例缩放的示例代码

    复制代码 代码如下: <SCRIPT language="JavaScript">function DrawImage(ImgD,FitWidth,FitHeight){       var image=new Image();       image.src=ImgD.src;       if(image.width>0 && image.height>0){           if(image.width/image.height>

  • C#图片按比例缩放的实现代码

    复制代码 代码如下: using System.Drawing;using System.Drawing.Drawing2D;using System.Drawing.Imaging; namespace Publics{    public class ImgHelper    {        public static void AdjustPhoto(int toWidth, int toHeight, string filePath, string fromFileName, stri

  • C#图片按比例缩放实例

    本文实例为大家分享了C#图片按比例缩放的具体代码,供大家参考,具体内容如下 工具类代码: using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; using System.Linq; using System.Text; using System.Threading.Tasks; names

  • JS图片等比例缩放方法完整示例

    本文实例讲述了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>

  • Android开发之imageView图片按比例缩放的实现方法

    本文实例讲述了Android开发之imageView图片按比例缩放的实现方法.分享给大家供大家参考,具体如下: android:scaleType可控制图片的缩放方式,示例代码如下: <ImageView android:id="@+id/img" android:src=\'#\'" /logo" android:scaleType="centerInside" android:layout_width="60dip"

  • 微信小程序 图片等比例缩放（图片自适应屏幕）

    微信小程序 图片等比例缩放（图片自适应屏幕）

    微信小程序 图片等比例缩放 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记. 老规矩,先上图. 1.图片高宽比小于屏幕高宽比 2.图片高宽比大于屏幕高宽比 3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用高宽来判断,应该是用高宽比判断后做缩放. 上代码: 1.index.wxml <!--index.wxml--> <

  • vue实现图片按比例缩放问题操作

    如下所示: getImg(src){ var img_url =src var img = new Image() img.src=img_url this.pictureHeight.height = Math.ceil(img.height/img.width * 460)+'px' }, //首先通过这个方法算出图片的高度/宽度比,460是我设置的宽度,计算得出需要的高度,然后修改容器的高 //度,图片通过height:100%;width:100%撑开,这样图片就不会失真了 vue里面还

  • jquery实现图片等比例缩放以及max-width在ie中不兼容解决

    上次用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题 jQuery部分代码 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function(){ var maxWidth=$(".imgBox").width(); $("img").each(function(){

  • 图片按比例缩放函数

    以下是程序代码: <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){  

随机推荐