zoukankan      html  css  js  c++  java
  • 控制IMG图片的大小缩放

    法一:
    img 标签是没有 onload 事件的.所以 UBB 代码中的img用到的onload来处理大的图片进行自适应,这样的办法就不能采取了.
    但是经过测试,body还是可以带onload事件的, 所以我解决的办法就是在页面全部加载完后再处理太大的图片.
    于是用JS写了一段简单的代码

    相关代码
    function ReImgSize(){
    for (j=0;j<document.images.length;j++)
    {
    document.images[j].width=(document.images[j].width>420)?"420":document.images[j].width;
    }
    }

    然后 在 body 上加上 onload="ReImgSize()" 就可以了.
    经过测试,在Mozilla和IE上通过.
    在这里补充一下关于 图片的自适应,这点Mozilla做的比IE好,因为可以用CSS来控制图片的自适应.
    我们都知道 Mozilla 支持一个 max-width 的CSS语法.于是,我们这样这样定义图片的全局样式

    相关代码 
    img{
    max-100%;height:auto;
    }

    这样图片就回在div或table内自动适应其大小了.

    这也是一种很简单有效的方法:利用CSS+JS让图片自动缩放-图片不变形

    .thumbImage {max- 100px;max-height: 100px;} /* for Firefox & IE7 */

    * html .thumbImage { /* for IE6 */
    expression(this.width > 100 && this.width > this.height ? 100 : auto);
    height: expression(this.height > 100 ? 100 : auto);

    法二:

    以前是判断heigth和width,然后再决定谁除谁再乘谁。怎么没有想到可以这样:?heigth和width只保留一个属性即可。

    function resizeImg(img) {
    try {
       if (img.offsetWidth > 0) {
        if (img.offsetWidth > img.height) {
         img.width = img.height;
         img.removeAttribute('height');

        }
       }
       else {
        setTimeout(function() {resizeImg(img);}, 50);
       }
    }
    catch (ex) {
       ;
    }
    }

    <img onload='resizeImg(this);' height='220' src='upload/200812052052440545.gif'>

    简洁代码是一种简洁但不简单的思想,是一种美。

    方法三:(可以控制图片高、宽在超出规定范围的时候才缩放)

    function resizeImgX(img,iwidth,iheight)
    {
       var _img = new Image();
       _img.src = img.src;
       if(_img.width > _img.height)
       {
          img.width = (_img.width > iwidth) ? iwidth : _img.width;
          img.height = (_img.height / _img.width) * img.width;
       }
       else if(_img.width < _img.height)
       {
          img.height = (_img.height > iheight) ? iheight : _img.height;
          img.width = (_img.width / _img.height) * img.height ;
       }
       else
       {
          img.height = (_img.height > iheight) ? iheight : _img.height;
          img.width = (_img.width > iwidth) ? iwidth : _img.width;
       }
    }

    调用:
    <img onload='resizeImg(this,500,400);' src='upload/200812052052440545.gif'>

    方法四:
    <script language="JavaScript"> 
    <!-- 
    function ResizeImages()
    {
    var myimg,oldwidth; 
    var maxwidth=180; //缩放系数 
    for(i=0;i <document.images.length;i++){
    myimg = document.images[i]; 
    if(myimg.width > maxwidth)

    oldwidth = myimg.width; 
    myimg.width = maxwidth; 
    myimg.height = myimg.height * (maxwidth/oldwidth); 


    }
    //--> 
    </script>

    <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){
    flag=true;
    if(image.width/image.height>= iwidth/iheight){
    if(image.width>iwidth){ 
    ImgD.width=iwidth;
    ImgD.height=(image.height*iwidth)/image.width;
    }else{
    ImgD.width=image.width; 
    ImgD.height=image.height;
    }
    ImgD.alt=image.width+"×"+image.height;
    }
    else{
    if(image.height>iheight){ 
    ImgD.height=iheight;
    ImgD.width=(image.width*iheight)/image.height; 
    }else{
    ImgD.width=image.width; 
    ImgD.height=image.height;
    }
    ImgD.alt=image.width+"×"+image.height;
    }
    }

    //-->
    </script>

    调用:<img src="images/toplogo.gif" onload="javascript:DrawImage(this,100,100)">

  • 相关阅读:
    1052 Linked List Sorting (25 分)
    1051 Pop Sequence (25 分)
    1050 String Subtraction (20 分)
    1049 Counting Ones (30 分)
    1048 Find Coins (25 分)
    1047 Student List for Course (25 分)
    1046 Shortest Distance (20 分)
    1045 Favorite Color Stripe (30 分)
    1044 Shopping in Mars (25 分)
    1055 The World's Richest (25 分)
  • 原文地址:https://www.cnblogs.com/zjoch/p/1955687.html
Copyright © 2011-2022 走看看