zoukankan      html  css  js  c++  java
  • 图片会自动按比例缩小(js版和css版)

    <title>javascript图片大小处理函数</title>
    <script language=Javascript>
    var proMaxHeight = 150;
    var proMaxWidth = 110;

    function proDownImage(ImgD){
          
    var image=new Image();
          image.src
    =ImgD.src;
          
    if(image.width>0 && image.height>0){
          
    var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.proMaxHeight/image.height;
        
    if(rate <= 1){   
         ImgD.width 
    = image.width*rate;
         ImgD.height 
    =image.height*rate;
        }
        
    else {
                              ImgD.width 
    = image.width;
                              ImgD.height 
    =image.height;
                      }
          }
    }
    </script>

    </head>

    <body>

    <img src="999.jpg" border=0 width="150" height="110"  onload=proDownImage(this);   />
    <img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this);   />
    </body>

     

     

    纯css的防止图片撑破页面的代码,图片会自动按比例缩小

    <style type="text/css">
    .content-width 
    {MARGIN: auto;WIDTH: 600px;}
    .content-width img
    {MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
    </style>


    <div class="content-width">
      
    <p><img src="/down/js/images/12567247980.jpg"/></p>
      
    <p><img src="/down/js/images/12567247981.jpg"/></p>
    </div>





  • 相关阅读:
    2017面向对象程序设计寒假作业2!
    寒假学习计划
    2017面向对象程序设计寒假作业1!
    bzoj3583 杰杰的女性朋友
    poj1185 [NOI2001炮兵阵地]
    bzoj1009 [HNOI2008]GT考试
    EXKMP
    bzoj1355 [Baltic2009]Radio Transmission
    poj1275 Cashier Employment
    bzoj3809 Gty的二逼妹子序列
  • 原文地址:https://www.cnblogs.com/zengxiangzhan/p/1565323.html
Copyright © 2011-2022 走看看