zoukankan      html  css  js  c++  java
  • JS控制图片显示的大小(图片等比例缩放)

     

     

    复制代码
    JS控制图片显示的大小(图片等比例缩放)代码
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <</SPAN>html xmlns="http://www.w3.org/1999/xhtml">
    <</SPAN>head>
    <</SPAN>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <</SPAN>title>最新javascript自动按比例显示图片,按比例压缩图片显示</</SPAN>title>
    <</SPAN>script type="text/javascript">
    function AutoResizeImage(maxWidth,maxHeight,objImg){
    var img = new Image();
    img.src 
    = objImg.src;
    var hRatio;
    var wRatio;
    var Ratio = 1;
    var = img.width;
    var = img.height;
    wRatio 
    = maxWidth / w;
    hRatio 
    = maxHeight / h;
    if (maxWidth ==0 && maxHeight==0){
    Ratio 
    = 1;
    }
    else if (maxWidth==0){//
    if (hRatio<</SPAN>1Ratio = hRatio;
    }
    else if (maxHeight==0){
    if (wRatio<</SPAN>1Ratio = wRatio;
    }
    else if (wRatio<</SPAN>1 || hRatio<</SPAN>1){
    Ratio 
    = (wRatio<=hRatio?wRatio:hRatio);
    }
    if (Ratio<</SPAN>1){
    = * Ratio;
    = * Ratio;
    }
    objImg.height 
    = h;
    objImg.width 
    = w;
    }
    </</SPAN>script>
    </</SPAN>head>
    <</SPAN>body>
    <</SPAN>br />
    原图显示(534 800)
    <</SPAN>br />
    onload="AutoResizeImage(0,0,this)
    <</SPAN>br />
    <</SPAN>href="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" target="_blank"><</SPAN>img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt="534 800"/></</SPAN>a><</SPAN>br/><</SPAN>br />
    1.按宽度250压缩,不限制高度 按比例压缩
    <</SPAN>br />
    onload="AutoResizeImage(250,0,this)"
    <</SPAN>br />
    <</SPAN>href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><</SPAN>img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)"  alt="250 374"/></</SPAN>a><</SPAN>br /><</SPAN>br />
    2.按高度250压缩,不限制宽度 按比例压缩
    <</SPAN>br />
    onload="AutoResizeImage(0,250,this)"
    <</SPAN>br />
    <</SPAN>href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><</SPAN>img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)"  alt="166 250"/></</SPAN>a><</SPAN>br /><</SPAN>br />
    3.按高度250宽度250 按比例压缩
    <</SPAN>br />
    onload="AutoResizeImage(250,250,this)"
    <</SPAN>br />
    <</SPAN>href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><</SPAN>img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)"  alt="200 300"/></</SPAN>a><</SPAN>br /><</SPAN>br />
    4.高宽不等比例压缩 (400 512),此时高度不变,会自动按高度的比例压缩。
    <</SPAN>br />
    onload="AutoResizeImage(400,512,this)"
    <</SPAN>br />
    <</SPAN>href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><</SPAN>img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)"  alt="341 512"/></</SPAN>a><</SPAN>br /><</SPAN>br />
    5.高宽不等比例压缩 (300 600),此时宽度不变,会自动按宽度的比例压缩。
    <</SPAN>br />
    onload="AutoResizeImage(300,600,this)"
    <</SPAN>br />
    <</SPAN>href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><</SPAN>img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)"  alt="300 449"/></</SPAN>a><</SPAN>br /><</SPAN>br />
    6.如果图片本来的高度和宽度小于压缩的最大高度和宽度,则不会拉大显示图片(按原图显示)
    <</SPAN>br />
    原图444 207,压缩为 500 600,将保持原图显示
    <</SPAN>br />
    onload="AutoResizeImage(500,600,this)"
    <</SPAN>br />
    <</SPAN>href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><</SPAN>img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/242776/o_20070410_b7409cd284a0f799a357uePcEFa6ty0X.jpg" border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)"  alt="444 207"/></</SPAN>a><</SPAN>br /><</SPAN>br />
    </</SPAN>body>
    </</SPAN>html>
    复制代码

     

    效果图:

  • 相关阅读:
    POJ 2923 Relocation (状态压缩,01背包)
    HDU 2126 Buy the souvenirs (01背包,输出方案数)
    hdu 2639 Bone Collector II (01背包,求第k优解)
    UVA 562 Dividing coins (01背包)
    POJ 3437 Tree Grafting
    Light OJ 1095 Arrange the Numbers(容斥)
    BZOJ 1560 火星藏宝图(DP)
    POJ 3675 Telescope
    POJ 2986 A Triangle and a Circle
    BZOJ 1040 骑士
  • 原文地址:https://www.cnblogs.com/liuzhuqing/p/7480636.html
Copyright © 2011-2022 走看看