css或js控制图片自适应
精贴
置顶
3835
0
图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用CSS控制图片使它自适应大小呢？
此个人博客想到了一个比较简单的解决方法，虽然不是非常的完美，如果您的要求不是非常高，已经可以满足你的需要了。我们看下面的代码：
div img {
max-width:600px;
width:600px;
width:expr
overflow:hidden;
}
max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
width:600px; 在所有浏览器中图片的大小为600px;
当图片大小大于600px，自动缩小为600px。在IE6中有效。
overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。
========================================================
如果想设定图片的高度和宽度都不超过某一个固定值，就需要在图片高度或宽度超过这个值的时候，让图片按比例缩小到这个尺寸。
1，对于现代浏览器，比如Firefox或是IE7及以上，直接使用max-width和max-height两条CSS属性即可。
2，对于IE 6.0及以下版本，以上两条CSS属性均不会被理会。之前处理这种事情，我们往往会借助Javascript，然后为图片加上onload事件。例如：
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<script type="text/javascript">
functionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</script>
今日天气
···
···
···
···
近一月回答榜 - TOP 12
钻石VIP
吴旭晓
普通会员
令王告白
普通会员
心如仓井空似水
普通会员
messi
普通会员
沧州华欧煤气炉
普通会员
孙文强
普通会员
lucifo
普通会员
xxxxxxx
普通会员
饼饼
普通会员
ucase
普通会员
留下足迹
普通会员
小谨夜
博客标签
- 热门排行
- CSS cursor鼠标样式一览表 2012/6/25
- .NET后台写JS代码 2011/11/3
- 网站地址多出jdfwkey的问题解析及... 2010/8/25
- 百度、google、Yahoo网站地图制作... 2011/1/30
- 数据库xxx的日志已满,请备份该数... 2013/7/19
- <a>标签的伪类书写顺序问题... 2010/9/4
- CEO名言 2010/8/31
- 什么是长尾关键词？ 2010/9/24
- Mysql 主从数据库同步 2010/9/12
- 用ASP实现网页BBS 2010/11/1
- 博主推荐
- 网站title标题如何正确修改不会被... 2013/8/26
- ASP .NET MYSQL 的简单分页 并不... 2013/8/19
- 网站有弹窗广告这样的站点，百度... 2013/8/17
- 做淘宝SEO优化需要注意的8大问题 2013/8/17
- 淘宝网怎么做SEO优化 2013/8/17
- 站长们要学习的“苍井空精神” 2013/8/17
- 苹果公司今日发布了iOS 7第五个开... 2013/8/7
- 小米1刷V5系统WIFI不能连接解决办... 2013/8/1
- 本博客手机版上线咯！会员后台也... 2013/7/31
- Win7系统环境安装配置PHP开发环境... 2013/7/29
- 随便看看
- IE与Firefox在JavaScript上的7个... 2010/9/5
- 【小木桩】继承viewgroup实现左侧... 2013/6/27
- 编程实例：Java中Calendar日期对... 2013/6/26
- 远程修改Serv-U FTP用户的登录密... 2010/9/2
- 各类数值型数据间的混合运算 2010/10/16
- 在服务器端控制网页 2010/11/1
- 网站导航如何SEO优化？ 2010/9/25
- 优化小细节不容忽视 2013/6/23
- Asp.net 2.0 Treeview 无限级无刷... 2010/9/11
- js图片滚动代码 2010/9/13