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>
    复制代码

     

    效果图:

  • 相关阅读:
    什么是webview
    juqery.fn.extend和jquery.extend
    LeetCode
    5. Longest Palindromic Substring
    42. Trapping Rain Water
    11. Container With Most Water
    621. Task Scheduler
    49. Group Anagrams
    739. Daily Temperatures
    3. Longest Substring Without Repeating Characters
  • 原文地址:https://www.cnblogs.com/liuzhuqing/p/7480636.html
Copyright © 2011-2022 走看看