Question to say "I can!"

CSS 圖片自適應顯示寬度

2013-05-05

這個使用尤其中手機屏幕上最有用。

有喜歡方法:

function ReImgSize(){
for (j=0;j<document.images.length;j++)
{
document.images[j].width=(document.images[j].width>420)?"420":document.images[j].width;
}
}

然后在body區域加上onload="ReImgSize()" 就可以了。經過測試,在Mozilla和IE上通過.。在這里補充一下關于圖片的自適應,這點Mozilla做的比IE好,因為可以用CSS來控制圖片的自適應。我們都知道Mozilla支持一個max-width 的CSS語法。于是我們這樣這樣定義圖片的全局樣式。

img{
max-width:100%;height:auto;
}

這樣圖片就回在div或table內自動適應其大小了.

 

Firefox/Opera/IE7都提供了max-width屬性支持。

假定希望圖片顯示寬度不超過500像素,CSS可能如下:

以下為引用的內容:

fit-image{
border:0;
max-width:500px;
}

讓我痛恨的IE6不支持max-width屬性,但是利用IE獨有的expression屬性能夠迂回的解決這個問題。

以下為引用的內容:

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’ //加載時顯示寬度為120px
}(this)
);
}

利用<img>的onload事件使圖片加載完成后計算其尺寸大小,假如超過500像素就顯示為500像素,否則顯示其默認寬度。

expression不是符合WEB標準的做法,不到萬不得以不建議使用。

作者:admin | Categories:設計問題 | Tags:

6條評論

  1. 廈門快生活說道:

    不錯,正用上了,哈哈!!!

  2. 一起購物吧說道:

    像這樣的代碼background-image:url(http://www.178by.com/images/1.jpg); 做背景如何適應,我看網上都是用DIV實現的

  3. 網站測速說道:

    博主介紹的這個方法很好用,我最近在做個移動版網頁,可以用到這個方法。

  4. 有趣網說道:

    非常有用 幫到我了

  5. t說道:

    還是很有用的,www.verygood.link/wap.php用了樓主第一種方法不管用呢

  6. 說道:

    非常感謝,我做的微信頁面剛好用上了

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 云南快乐10分怎么玩法 北京赛车pk拾开奖直播 北京快中彩大小走势图 11选五5开奖一定牛 上海时时乐开奖公告 福建体彩网31选7论坛 爱股票app股市刀锋 15选5奖金额表 国际股票指数 体彩排列7中奖规则 浙江11选五技巧 幸运28预测神测网组合 安徽快3app 今日茅台股票价格 腾讯三分彩计划软件 手机最快现场开奖直播