css 圖片自適應(yīng)寬度 CSS實(shí)現(xiàn)控制圖片自適應(yīng)顯示寬度代碼
發(fā)布時(shí)間：2013-02-06 11:28:03 作者：佚名 
我要評(píng)論
我要評(píng)論由于用戶上傳的圖片太大自己又不去調(diào)解，導(dǎo)致展示的時(shí)候圖片太大撐開了，直接影響了界面的美觀度，于是想使用css屬性嘗試控制下:給圖片設(shè)置顯示最大的寬度,還好Firefox/Opera/IE7都提供了max-width屬性支持，感興趣的朋友可以了解下
做網(wǎng)站的時(shí)候經(jīng)常遇到，新聞?wù)故镜?，用戶上傳的圖片太大了 自己又不去調(diào)解，導(dǎo)致展示的時(shí)候圖片太大撐開了，使頁面顯示的很難。這里利用CSS屬性，使圖片超過展示的寬度后，給圖片設(shè)置顯示最大的寬度。
假如用width屬性強(qiáng)行設(shè)定顯示尺寸似乎太不智能。幸好Firefox/Opera/IE7都提供了max-width屬性支持。
假定希望圖片顯示寬度不超過500像素，CSS可能如下：
以下為引用的內(nèi)容：
fit-image{
border :0;
max-width:500px;
}
讓我痛恨的IE6不支持max-width屬性，但是利用IE獨(dú)有的expression屬性能夠迂回的解決這個(gè)問題。
.fit_image
{
border:0;
max-width:700px;
width:expression(
function(img){
img.onload=function(){
this.style.width='';
this.style.width=(this.width>700)?"700px":this.width+"px"
};
return '700px'
}(this)
);
}
利用<img>的onload事件使圖片加載完成后計(jì)算其尺寸大小，假如超過500像素就顯示為500像素，否則顯示其默認(rèn)寬度?！?
expression不是符合WEB標(biāo)準(zhǔn)的做法，不到萬不得以不建議使用。但是不能不承認(rèn)IE的很多擴(kuò)展是不錯(cuò)的，IE不應(yīng)該被輕視！
假如用width屬性強(qiáng)行設(shè)定顯示尺寸似乎太不智能。幸好Firefox/Opera/IE7都提供了max-width屬性支持。
假定希望圖片顯示寬度不超過500像素，CSS可能如下：
以下為引用的內(nèi)容：
復(fù)制代碼
代碼如下:fit-image{
border :0;
max-width:500px;
}
讓我痛恨的IE6不支持max-width屬性，但是利用IE獨(dú)有的expression屬性能夠迂回的解決這個(gè)問題。
復(fù)制代碼
代碼如下:.fit_image
{
border:0;
max-width:700px;
width:expression(
function(img){
img.onload=function(){
this.style.width='';
this.style.width=(this.width>700)?"700px":this.width+"px"
};
return '700px'
}(this)
);
}
利用<img>的onload事件使圖片加載完成后計(jì)算其尺寸大小，假如超過500像素就顯示為500像素，否則顯示其默認(rèn)寬度?！?
expression不是符合WEB標(biāo)準(zhǔn)的做法，不到萬不得以不建議使用。但是不能不承認(rèn)IE的很多擴(kuò)展是不錯(cuò)的，IE不應(yīng)該被輕視！
相關(guān)文章
- 小編今天為大家介紹一篇HTML自適應(yīng)表格的方法，希望對(duì)大家有所幫助。2013-04-03
左定寬度右自適應(yīng)寬度并且等高布局實(shí)現(xiàn)代碼
左側(cè)固定寬，右側(cè)自適應(yīng)屏幕寬;左右兩列，等高布局;左右兩列要求有最小高度，例如：200px;（當(dāng)內(nèi)容超出200時(shí)，會(huì)自動(dòng)以等高的方式增高）要求不用JS或CSS行為實(shí)現(xiàn),那么下面2012-12-24display:table-cell實(shí)現(xiàn)兼容性的兩欄自適應(yīng)布局實(shí)現(xiàn)代碼
display:table-cell實(shí)現(xiàn)兼容性的兩欄自適應(yīng)布局,需要的朋友可以參考下2012-12-07網(wǎng)頁設(shè)計(jì)技巧:iframe自適應(yīng)高度的問題
所謂iframe自適應(yīng)高度，就是，基于界面美觀和交互的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個(gè)iframe2012-11-12- 寬度自適應(yīng)：就是元素的寬度根居里面的內(nèi)容來變化2012-06-14
Button在IE6、7下的自適應(yīng)寬度問題解決方法
很早就遇到過這么個(gè)小問題，但由于其并未影響到實(shí)際作用和美觀就沒有正面解決它，現(xiàn)在，我們來試著解決它2012-02-23div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng)效果代碼
textarea標(biāo)簽為表單元素，一般用在多行文字的輸入。在web應(yīng)用上常見的是評(píng)論輸入框，微博信息輸入框等。2010-12-27div完美自適應(yīng)動(dòng)態(tài)上下左右居中
div完美自適應(yīng)動(dòng)態(tài)上下左右居中，多用于信息提示框效果。2010-08-10CSS min-height IE6、IE7、FF下DIV自適應(yīng)高度
IE6、IE7、FF下DIV自適應(yīng)高度2010-05-13Iframe 高度自適應(yīng)（兼容IE/Firefox、同域/跨域）
在實(shí)際的項(xiàng)目進(jìn)行中，很多地方可能由于歷史原因不得不去使用iframe，包括目前正火熱的應(yīng)用開發(fā)也是如此。2010-03-17