zoukankan      html  css  js  c++  java
  • 图片自动按比例缩小代码(防止页面被图片撑破)

    <div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div>
    <script type="text/javascript" >
    
    //缩放图片到合适大小
    function ResizeImages()
    {
       var myimg,oldwidth,oldheight;
       var maxwidth=550;
       var maxheight=880
       var imgs = document.getElementById('article').getElementsByTagName('img');   //如果你定义的id不是article,请修改此处
    
       for(i=0;i<imgs.length;i++){
         myimg = imgs[i];
    
         if(myimg.width > myimg.height)
         {
             if(myimg.width > maxwidth)
             {
                oldwidth = myimg.width;
                myimg.height = myimg.height * (maxwidth/oldwidth);
                myimg.width = maxwidth;
             }
         }else{
             if(myimg.height > maxheight)
             {
                oldheight = myimg.height;
                myimg.width = myimg.width * (maxheight/oldheight);
                myimg.height = maxheight;
             }
         }
       }
    }
    //缩放图片到合适大小
    ResizeImages();
    </script>

      

    第二种方法 简单:

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    img {expression(this.width>600?"400px":this.width+"px");}
    </style>
    </head>
    <body>
    图片宽度大于600像素都强制显示为580像素宽<br><br>
    <div>
    <img src="http://d.lanrentuku.com/lanren/wallpaper/wallpaper-0013.jpg" />
    </div>
    <p>查找更多代码,请访问:<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
    </body>
    </html>
    关注.NET开发技术,网站开发,应用系统开发http://www.hnhqwl.com
  • 相关阅读:
    linux内存和swap
    Linux awk sort
    redis aof和rdb区别
    STL中的map、unordered_map、hash_map
    mysql 冷热备份
    redis
    linux 几个命令
    linux erase
    group by
    现在很多技术知识点缺乏来龙去脉的介绍
  • 原文地址:https://www.cnblogs.com/nianyuwen/p/2540135.html
Copyright © 2011-2022 走看看