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;

}

相信大家已經學會css讓圖片等比例縮小的方法了吧!感謝大家對我們網站的支持!

相關推薦：

divcss繼承標記是什麼呢