css图片缩放代码:css实现图片等比例缩放

发布时间:2019-12-09编辑:脚本学堂
分享一例css图片缩放代码,为适应手机端网站的图片显示,可以用css实现图片按比例绽放的效果,需要的朋友参考下。

css等比例缩放图片
 

复制代码 代码示例:
img {
max-width:500px;
myimg:expression(onload=function(){
this.style.width=(this.offsetWidth > 500)?”500px”:”auto”}
);
}

说明:
规定了最大尺寸是宽500px,超过500px 则自动等比例缩小到500px
可能在某些浏览器下效果不好,比如存在高度不自动缩放等问题。

以下代码效果要好一些:
对全局都是有效,如果是针对正文内容,在img前加个限制,否则可能导致logo等图片变形。

css样式实现图片的等比例缩放:

复制代码 代码示例:
.context img{
max-width:500px;
//IE7、FF等其他非IE浏览器下最大宽度为500px;
width:500px;
//所有浏览器中图片的大小为500px;
width:expression(document.body.clientWidth>300?”300px”:”auto”);
//当图片大小大于500px,自动缩小为500px;
overflow:hidden;
}