快速導航: SEO培訓 | SEO教程 | PHP培訓 | PHP教程 | 網頁設計培訓 | 辦公自動化培訓
收藏本站 | 設為首頁
當前位置:網站首頁 > 網頁設計教程 > div+css > div+css

設定網頁內圖片最小最大寬度和高度(兼容IE6)

時間:2012-10-21 14:36 | 來源:德曼網頁設計 | 作者:德曼網頁設計培訓部
如何設定網頁內圖片最小最大寬度和高度?圖片自動寬度如何設置?并且可以兼容IE6。下面給出了css樣式代碼。

德曼小編找了一個圖片自動高寬設置的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培訓)學校 — www.294028.tw, All Rights Reserved.
合肥德曼電腦培訓中心所有內容版權所有,未經許可請勿轉載。合肥seo培訓機構網站備案:皖ICP備09018273號
德曼(合肥做seo的公司)專注于【合肥SEO培訓 | 合肥php培訓 | 合肥網頁設計培訓】職業技能培訓!
cba比分结果今天 澳洲幸运10彩种 百宝彩票陕西11选5 浙江体彩20选5开奖结果查询 河内五分彩官网开奖查询 海南七星彩全国下 bg真人比ag靠谱吗 江苏体彩7位数基本走势图 bbin电子游艺app—点击登陆 云南快乐10分 亿客隆 香港六合彩巳开特码 秒速赛车玩法技巧_Welcome pc蛋蛋加拿大卡红刷水技巧 亿客隆彩票登录 陕西快乐十分6选5技巧 天津时时彩五星基本走势彩经网