注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一个人的世界

专注于网站优化与网络发展的研究与探索..

 
 
 

日志

 
 
 
 

css让图片等比例缩小的代码  

2015-03-02 09:11:21|  分类: 网络交流 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

   随着智能手机的增多,手机网站也可以做的更加个性化,最近在改版自己的手机网站

  这其中,遇到了网站图片尺寸问题,手机屏幕都比较小,怎么让上传的规则不一的图片在手机上显示的更加美观呢?

  那就利用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;

  }

  评论这张
 
阅读(47)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017