用CSS使圖片自適應(yīng)顯示寬度_Web標(biāo)準(zhǔn)教程
公司的項(xiàng)目中需要顯示由用戶提供URI鏈接的圖片,可是預(yù)先無(wú)法獲知圖片的尺寸大小,如果圖片尺寸過(guò)大將會(huì)影響頁(yè)面布局。最理想的解決方案自然是自動(dòng)生成縮略圖,涉及的后臺(tái)工作較為復(fù)雜,用CSS進(jìn)行控制是一個(gè)可以接受的捷徑。
如果用width屬性強(qiáng)行設(shè)定顯示尺寸似乎太不智能。幸好Firefox/Opera/IE7都提供了max-width屬性支持。
假定希望圖片顯示寬度不超過(guò)500像素,CSS可能如下:
以下為引用的內(nèi)容:
fit-image{
border :0;
max-width:500px;
}
讓我痛恨的IE6不支持max-width屬性,但是利用IE獨(dú)有的expression屬性可以迂回的解決這個(gè)問(wèn)題。
以下為引用的內(nèi)容:
fit-image{
border :0;
max-width:500px;
width: expression(
function(img){
img.onload=function(){
this.style.width=’’;
this.style.width=(this.width>500)?"500px":this.width+"px"
};
return’120px’ //加載時(shí)顯示寬度為120px
}(this)
);
}
利用<img>的onload事件使圖片加載完成后計(jì)算其尺寸大小,如果超過(guò)500像素就顯示為500像素,否則顯示其默認(rèn)寬度�!�
expression不是符合WEB標(biāo)準(zhǔn)的做法,不到萬(wàn)不得以不建議使用。但是不能不承認(rèn)IE的很多擴(kuò)展是不錯(cuò)的,IE不應(yīng)該被輕視!
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個(gè)WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對(duì)SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語(yǔ):開(kāi)始標(biāo)準(zhǔn)之路
- 相關(guān)鏈接:
- 教程說(shuō)明:
Web標(biāo)準(zhǔn)教程-用CSS使圖片自適應(yīng)顯示寬度
。