DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 利用css實現圖片等比例縮放
利用css實現圖片等比例縮放
編輯:布局實例     

  隨著智能手機的增多,手機網站也可以做的更加個性化,最近在改版自己的手機網站
這其中,遇到了網站圖片尺寸問題,手機屏幕都比較小,怎麼讓上傳的規則不一的圖片在手機上顯示的更加美觀呢?
那就利用css的強大功能吧。
先附上代碼:
img {
max-width:500px;
myimg:expression(onload=function(){
this.style.width=(this.offsetWidth > 500)?”500px”:”auto”}
);
}
解析下其中的幾個數字吧。
這裡規定了最大尺寸是寬500px,超過500px 則自動等比例縮小到500px
上面這段代碼可能在某些浏覽器下效果不好,比如存在高度不自動縮放等問題
那麼可以試試下面的代碼
我們再附上一段代碼,對全局都是有效,如果是針對正文內容,在img前加個限制
比如我下面寫的,否則可能導致logo等圖片變形
.context img{
max-width:500px;
//IE7、FF等其他非IE浏覽器下最大寬度為500px;
width:500px;
//所有浏覽器中圖片的大小為500px;
width:expression(document.body.clientWidth>300?”300px”:”auto”);
//當圖片大小大於500px,自動縮小為500px;
overflow:hidden;
}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved