• 控制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)">

  • 相关阅读:
    一个简单的window.onscroll实例
    vue 自定义组件使用v-model
    vue开发后台管理系统有感
    cube打包后css顺序错误
    app嵌套的vue项目更新后,页面没有更新
    vue打包后css背景图片地址找不到
    git取消操作命令
    cube-ui indexList的正确使用
    首次db查询时延迟明显高于后面几次。
    git中的merge与rebase
  • 原文地址:https://www.cnblogs.com/zjoch/p/1955687.html
Copyright © 2020-2023  润新知