css或js控制图片自适应
精贴
置顶
4581
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
wuxuxiao
钻石VIP
qwe2466985
超级会员
yu_rebecca
黄金会员
wuxiao2882
青铜会员
a448155162
普通会员
messi
普通会员
85xinxi
普通会员
fushang369
普通会员
wawa512com
普通会员
zhuangjunhua
普通会员
ucase
普通会员
xuchunyun
普通会员
博客标签
- 热门排行
- CSS cursor鼠标样式一览表 2012-06-25
- .NET后台写JS代码 2011-11-03
- 网站地址多出jdfwkey的问题解析及... 2010-08-25
- 数据库xxx的日志已满,请备份该数... 2013-07-19
- 百度、google、Yahoo网站地图制作... 2011-01-30
- <a>标签的伪类书写顺序问题... 2010-09-04
- 什么是长尾关键词？ 2010-09-24
- CEO名言 2010-08-31
- Mysql 主从数据库同步 2010-09-12
- 用ASP实现网页BBS 2010-11-01
- 博主推荐
- 本个人博客微信公众平台上线啦~~... 2013-10-13
- 饼哥网络互联上线啦~~要买域名空... 2013-09-20
- 网站title标题如何正确修改不会被... 2013-08-26
- 饼哥通讯录系统上线啦，欢迎大家... 2013-08-24
- ASP .NET MYSQL 的简单分页 并不... 2013-08-19
- 网站有弹窗广告这样的站点，百度... 2013-08-17
- 做淘宝SEO优化需要注意的8大问题 2013-08-17
- 淘宝网怎么做SEO优化 2013-08-17
- 站长们要学习的“苍井空精神” 2013-08-17
- 苹果公司今日发布了iOS 7第五个开... 2013-08-07
- 随便看看
- 字符型数据 2010-10-16
- .net将IP转换为10进制 2013-07-18
- Page.IsPostBack 属性 2010-09-09
- 位运算符 2010-10-18
- <a>标签的伪类书写顺序问题... 2010-09-04
- 创建文本形式的Sitemap 2010-09-26
- ASP .NET MYSQL 的简单分页 并不... 2013-08-19
- 用C#实现查询百度收录量 2010-08-31
- IT博客证实搜索引擎区分大小写 2013-08-30
- Sys.ArgumentOutOfRangeExceptio... 2013-07-06
- RSS新闻
- 传媒新闻
- CSDN
- 八卦新闻
- 女性新闻
- 台湾新闻
- 互联网
- 军事-新浪博客
- IT-新浪博客
- 汽车新闻
- 游戏新闻
- 国际新闻
- 国内新闻
- 体育新闻
- 我的微博