随着智能手机的增多,手机网站也可以做的更加个性化,最近在改版自己的手机网站xY7HTML5中文学习网 - HTML5先行者学习网
这其中,遇到了网站图片尺寸问题,手机屏幕都比较小,怎么让上传的规则不一的图片在手机上显示的更加美观呢?xY7HTML5中文学习网 - HTML5先行者学习网
那就利用css的强大功能吧。xY7HTML5中文学习网 - HTML5先行者学习网
先附上代码:xY7HTML5中文学习网 - HTML5先行者学习网
img {xY7HTML5中文学习网 - HTML5先行者学习网
max-width:500px;xY7HTML5中文学习网 - HTML5先行者学习网
myimg:expression(onload=function(){xY7HTML5中文学习网 - HTML5先行者学习网
this.style.width=(this.offsetWidth > 500)?”500px”:”auto”}xY7HTML5中文学习网 - HTML5先行者学习网
);xY7HTML5中文学习网 - HTML5先行者学习网
}xY7HTML5中文学习网 - HTML5先行者学习网
解析下其中的几个数字吧。xY7HTML5中文学习网 - HTML5先行者学习网
这里规定了最大尺寸是宽500px,超过500px 则自动等比例缩小到500pxxY7HTML5中文学习网 - HTML5先行者学习网
上面这段代码可能在某些浏览器下效果不好,比如存在高度不自动缩放等问题xY7HTML5中文学习网 - HTML5先行者学习网
那么可以试试下面的代码xY7HTML5中文学习网 - HTML5先行者学习网
我们再附上一段代码,对全局都是有效,如果是针对正文内容,在img前加个限制xY7HTML5中文学习网 - HTML5先行者学习网
比如我下面写的,否则可能导致logo等图片变形xY7HTML5中文学习网 - HTML5先行者学习网
.context img{xY7HTML5中文学习网 - HTML5先行者学习网
max-width:500px;xY7HTML5中文学习网 - HTML5先行者学习网
//IE7、FF等其他非IE浏览器下最大宽度为500px;xY7HTML5中文学习网 - HTML5先行者学习网
width:500px;xY7HTML5中文学习网 - HTML5先行者学习网
//所有浏览器中图片的大小为500px;xY7HTML5中文学习网 - HTML5先行者学习网
width:expression(document.body.clientWidth>300?”300px”:”auto”);xY7HTML5中文学习网 - HTML5先行者学习网
//当图片大小大于500px,自动缩小为500px;xY7HTML5中文学习网 - HTML5先行者学习网
overflow:hidden;xY7HTML5中文学习网 - HTML5先行者学习网
}