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盘开奖套路 天津11选5 台湾麻将胡牌牌型 有板深雪全部电影 新疆18选7 球探比分直播电脑版 河内5分彩是官方开奖结果 单机美女打麻将 快乐赛车大战破解版无限钻石版 宁夏11选5 河北十一选五走势图 nba比分捷报网 安徽十一选五前三组遗漏 500万足球彩票即时比分 新疆11选5什么是跨度 河北20选5走势图 日本av女优美知广子暴毙