快速导航: SEO培训 | SEO教程 | PHP培训 | PHP教程 | 网页设计培训 | 办公自动化培训
收藏本站 | 设为首页
当前位置:广东快乐10分怎么玩 > 网页设计教程 > div+css > div+css

广东省快乐十分开奖:设定网页内图片最小最大宽度和高度(兼容IE6)

时间:2012-10-21 14:36 | 来源:德曼网页设计 | 作者:德曼网页设计培训部
如何设定网页内图片最小最大宽度和高度?图片自动宽度如何设置?并且可以兼容IE6。下面给出了css样式代码。

广东快乐10分怎么玩 www.u78ly.cn 德曼小编找了一个图片自动高宽设置的CSS,拿来分享一下。如何设定网页内图片最小最大宽度和高度?图片自动宽度如何设置?并且可以兼容IE6。下面给出了css样式代码。

css样式:

/* 最小宽度 */

.min_width{min-width:300px;

  /* sets max-width for IE */

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

}

 

/* 最大宽度 */

.max_width{

  max-width:600px;

  /* sets max-width for IE */

  _width: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-width:300px;

  max-width:600px;

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

  _width: 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{width: expression(this.width > 200 ? '200px': true); max-width: 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-width:300; 
max-height:100px;  
/*由于IE6.0以及以前版本的IE不支持上边两个属性,所以加上以下两条语句.这里要说明的是expression只有IE支持*/   
width: 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-width:300px; 
max-height:100px; 
width: 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这两个类变量就可以很方便的修改最大的长宽.


关键词:网页,图片宽度,网页图片高度,网页兼容IE6
分享到:
首页 | 关于我们 | 课程设置 | 学前须知 | SEO培训 | 网页设计培训 | PHP+MYSQL培训 | 办公自动化培训 | 付款方式 | 联系我们 CopyRight © 2005-2012 德曼(合肥SEO培训)学校 — 广东快乐10分怎么玩 www.u78ly.cn, All Rights Reserved.
合肥德曼电脑培训中心所有内容版权所有,未经许可请勿转载。合肥seo培训机构网站备案:皖ICP备09018273号
德曼(合肥做seo的公司)专注于【合肥SEO培训 | 合肥php培训 | 合肥网页设计培训】职业技能培训!
  • 【新媒体矩阵】长城二十四小时客户端 2018-08-14
  • 回复@“老笑头”,你的牛二逻辑确实很通透!论坛奇葩!哈哈哈哈! 2018-08-14
  • 地面被硬化,地下被掏空,城中河流、湖泊有限,一旦遇到短时间内的强降雨,大多数城市将水漫金山。在可预见的将来,这个问题无解。 2018-07-26
  • 重庆高校陆续公布招生计划、专业设置情况和新政策 2018-07-25
  • 临潼区马额镇庙张村西坡组农民饮用黄泥水 2018-07-25
  • 楼市进入增加“有效供给”新时期 高端住宅或入市 2018-07-24
  • 小艾童鞋被钉上了自己设计制造的耻辱柱! 2018-07-24
  • 全国最美家庭、第十一届全国五好家庭和省五好家庭推荐公示 2018-07-23
  • 海上洄游时 北海狗 连续两周深睡眠 2018-07-23
  • 三晋史话:曹操是如何统一山西的? 2018-07-22
  • "生死"淘汰赛启动 中国私募股权行业加速洗牌 2018-07-22
  • 为了守护净土 1102位羌塘牧民千里迢迢南迁至拉萨 2018-07-22
  • 候选企业:四川郎酒股份有限公司 2018-07-22
  • 云阳神秘迷宫9月迎客 2018-07-21
  • 专题:信仰凝聚力量 弘扬社会主义核心价值观 2018-07-21
  • 871| 794| 448| 978| 934| 603| 240| 258| 681| 892|