<script type="text/javascript"><!-- google_ad_client = "pub-7655768891627260"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text_image"; //2007-07-16: 酷哥廣告渠道 google_ad_channel = "5559849160"; google_ui_features = "rc:0"; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>把一副大圖片按比例縮小到某個尺寸，對于現(xiàn)代瀏覽器，直接使用max-width和max-height兩條CSS屬性即可。閱讀全文...
對于IE6.0及以下版本，以上兩條CSS屬性均不會被理會。之前處理這種事情，我們往往會借助Javascript，然后為圖片加上onload事件。例如：
這固然能解決問題，但是對以后頁面的升級會帶來麻煩——隨著瀏覽器對CSS支持的完善，我們遲早會把圖片上的onload事件統(tǒng)統(tǒng)去除。該是Expression的ShowTime了，既然IE支持通過Expression在CSS中放置一些腳本，而這段腳本又只是提供給IE6.0及以下版本使用，那么把它寫到Expression中再合適不過。
最終，把一副大圖片按比例縮小到50px*50px以內(nèi)，可以參照以下這段CSS：
至于圖片是如何保持其高寬比例的，這張圖片可以解釋：
<
scripttype
=
"
text/javascript
"
><!--
google_ad_client
=
"
pub-7655768891627260
"
;
google_ad_width
=
728
;
google_ad_height
=
90
;
google_ad_format
=
"
728x90_as
"
;
google_ad_type
=
"
text_image
"
;
//
2007-07-16:酷哥廣告渠道
google_ad_channel
=
"
5559849160
"
;
google_ui_features
=
"
rc:0
"
;
//
-->
</
script
>
<
scripttype
=
"
text/javascript
"
src
=
"
http://pagead2.googlesyndication.com/pagead/show_ads.js
"
>
</
script
>
對于IE6.0及以下版本，以上兩條CSS屬性均不會被理會。之前處理這種事情，我們往往會借助Javascript，然后為圖片加上onload事件。例如：
引用內(nèi)容
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<scripttype="text/javascript">
functionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</script>
<scripttype="text/javascript">
functionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</script>
這固然能解決問題，但是對以后頁面的升級會帶來麻煩——隨著瀏覽器對CSS支持的完善，我們遲早會把圖片上的onload事件統(tǒng)統(tǒng)去除。該是Expression的ShowTime了，既然IE支持通過Expression在CSS中放置一些腳本，而這段腳本又只是提供給IE6.0及以下版本使用，那么把它寫到Expression中再合適不過。
最終，把一副大圖片按比例縮小到50px*50px以內(nèi)，可以參照以下這段CSS：
引用內(nèi)容
.thumbImage{
max-width:50px;
max-height:50px;
}
*html.thumbImage{
width:expression(this.width>50&&this.width>this.height?50:auto);
height:expresion(this.height>50?50:auto);
}
max-width:50px;
max-height:50px;
}
*html.thumbImage{
width:expression(this.width>50&&this.width>this.height?50:auto);
height:expresion(this.height>50?50:auto);
}
至于圖片是如何保持其高寬比例的，這張圖片可以解釋：
<
scripttype
=
"
text/javascript
"
><!--
google_ad_client
=
"
pub-7655768891627260
"
;
google_ad_width
=
728
;
google_ad_height
=
90
;
google_ad_format
=
"
728x90_as
"
;
google_ad_type
=
"
text_image
"
;
//
2007-07-16:酷哥廣告渠道
google_ad_channel
=
"
5559849160
"
;
google_ui_features
=
"
rc:0
"
;
//
-->
</
script
>
<
scripttype
=
"
text/javascript
"
src
=
"
http://pagead2.googlesyndication.com/pagead/show_ads.js
"
>
</
script
>
更多文章、技術交流、商務合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
