我们为大家收集整理了关于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实现图片等比例缩放想了解更多精彩内容，请关注我们的网站!

相关推荐：

怎么用css控制网页的左右排列呢