zoukankan      html  css  js  c++  java
  • 设定网页最小最大宽度和高度(兼容IE6)

    http://www.cnblogs.com/double-bin/archive/2011/12/19/2293093.html

    /* 最小寬度 */

    .min_width{min-300px;

      /* sets max-width for IE */

      _expression(document.body.clientWidth < 300 ? "300px" : "auto");

    }

    /* 最大寬度 */

    .max_width{

      max-600px;

      /* sets max-width for IE */

      _expression(document.body.clientWidth > 600 ? "600px" : "auto");

    }

    /* 最小高度 */

    .min_height{

      min-height:200px;

      /* sets min-height for IE */

      _height:expression(this.scrollHeight < 200 ? "200px" : "auto");

    }

    /* 最大高度 */

    .max_height{

      max-height:400px;

      /* sets max-height for IE */

      _height:expression(this.scrollHeight > 400 ? "400px" : "auto");

    /* 最大最小寬度 */

    .min_and_max_width{

      min-300px;

      max-600px;

      /* sets min-width & max-width for IE */

      _ expression(

        document.body.clientWidth < 300 ? "300px" :

           ( document.body.clientWidth > 600 ? "600px" : "auto")

      );

    /* 最大最小高度 */

    .min_and_max_height{

      min-height:200px;

      max-height:400px;

      /* sets min-height & max-height for IE */

      _height: expression(

        this.scrollHeight < 200 ? "200px" :

          ( this.scrollHeight > 400 ? "400px" : "auto")

      );

    }

     另插一条限定图片最大宽度和高度的代码,仅供参考,其实与上述同源同理。

    Html代码  

    这里是结合css和其支持的expression实现的,示例代码如下:  
    <title>控制图片的最大高宽</title>  
      <style type="text/css">  
           .clear{clear:both;}  

    .widthimg{ expression(this.width > 200 ? '200px': true); max- 200px; }  
    </style>    
    <body>  
    <div class="clear">  
    <img class="widthimg" src="../image/mm.jpg" />  
    </div>  
    <div class="clear">  
    <img src="../image/xx7.jpg" />  
    </div>  
    </body>  
     </html>  


     <head>  
    <style type="text/css">     
    <!--  
    img.pic{     
    max-300;  
    max-height:100px;   
    /*由于IE6.0以及以前版本的IE不支持上边两个属性,所以加上以下两条语句.这里要说明的是expression只有IE支持*/    
     expression(this.width > 300 && this.width / 300 >= this.height / 100 ? 300 : true);    
    height: expression(this.height > 100 && this.width / 300 < this.height / 100 ? 100 : true);   
    }   
    //-->    
    </style>  
     </head>   
    <body>   
    <div id="pic">    
    </div>   
    <img class="pic" src="Blue hills.jpg" />   
    </body>   
    </html>  
    由于上边的代码中,设置最大的长宽是直接用数字的,这样再修改的时候十分不方便,所以做了以下修改:    
    <html>   
    <head>  
    <script type="text/javascript">  
    <!--  
    Object.MAX_WIDTH = 400;  
    Object.MAX_HEIGHT = 300;  
    -->    
    </script>   
    <style type="text/css">    
    <!--   
    img.pic{    
    max-300px;  
    max-height:100px;  
     expression(this.width > Object.MAX_WIDTH && this.width / Object.MAX_WIDTH >= this.height / Object.MAX_HEIGHT ? Object.MAX_WIDTH : true);   
    height: expression(this.height > Object.MAX_HEIGHT && this.width / Object.MAX_WIDTH < this.height / Object.MAX_HEIGHT ? Object.MAX_HEIGHT : true);  
    }    
    //-->   
    </style>  
    </head>  
    <body>   
    <div id="pic">    
    </div>   
    <img class="pic" src="Blue hills.jpg" />   
    </body>  
    </html>  
    这样的话,只需要修改Object.MAX_WIDTH和Object.MAX_HEIGHT这两个类变量就可以很方便的修改最大的长宽.

  • 相关阅读:
    python工具类 md5
    python 线程池, 进程池
    scrapydweb 安装部署
    python 协程
    jquery
    scrapyd 设置访问密码
    pat 乙级1033 旧键盘打字(20)
    1459 迷宫游戏(51NOD)
    python之禅
    Jzzhu and Cities ----CodeForces
  • 原文地址:https://www.cnblogs.com/mmcmmc/p/4064824.html
Copyright © 2011-2022 走看看