首 页
创意产业
设计资讯
UI设计
平面设计
设计教程
网站建设
站长学院
素材下载
软件下载
当前位置:
首页
>>
网站建设
>> 正文
js+css图片自动等比例缩小
文章来自:设计学院 | 发表时间:2007-10-15 20:05:17
图片自动等比例缩小,其实如果不考虑ie6的话,用css就可以实现,设定img的max-width和max-height,而标签内不设定widht和height即可。
ie7已经支持max-width和max-height,这是为数不多的好消息之一。
但是对于ie6,就只能用js来设置了。
在 ff 2.0/ ie6 / ie7 / opera 8.5 中测试通过。
Source Code to Run
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片自动等比例缩小 </title> <script type="text/javascript" language="javascript"> <!-- function imgFix() { //定义要限制的图片宽高,这个宽高要同style里面定义的相同,小于限定高宽的图片不操作 var widthRestriction = 200; var heightRestriction = 200; var allElements = document.getElementsByTagName('*') for (var i = 0; i < allElements.length; i++) { if (allElements[i].className.indexOf('imgBox') >= 0) { var imgElements = allElements[i].getElementsByTagName('img'); for (var j=0; j < imgElements.length; j++) { if ( imgElements[j].width > widthRestriction || imgElements[j].height > heightRestriction ) { if ( imgElements[j].width > imgElements[j].height) { imgElements[j].height = imgElements[j].height*(widthRestriction/imgElements[j].width); imgElements[j].width = widthRestriction; } else { imgElements[j].width = imgElements[j].width*(heightRestriction/imgElements[j].height); imgElements[j].height = heightRestriction; } } } } } } window.onload = imgFix; --> </script> <style type="text/css"> <!-- .imgBox li { list-style:none; width:200px; /* 宽度 */ height:200px; /* 高度 */ background:#ccc; border:1px solid #666; text-align:center; margin:5px; line-height:200px; } .imgBox img { max-width:200px; /* 宽度 */ max-height:200px; /* 高度 */ vertical-align:middle; } --> </style> </head> <body> <ul class="imgBox"> <li> <img src="http://www.ddcat.net/tebie/coco/img/coco_20070618_03.jpg" mce_src="http://www.ddcat.net/tebie/coco/img/coco_20070618_03.jpg" alt="img" /> </li> <li> <img src="http://www.ddcat.net/tebie/coco/img/coco_20070618_04.jpg" mce_src="http://www.ddcat.net/tebie/coco/img/coco_20070618_04.jpg" alt="img" /> </li> <li> <img src="http://www.ddcat.net/bbs2007/images/style_1/zh-cn/redirect_logo.gif" mce_src="http://www.ddcat.net/bbs2007/images/style_1/zh-cn/redirect_logo.gif" alt="img" /> </li> <li> <img src="http://www.ddcat.net/blog/templates/ddcat2007/img/logo.gif" mce_src="http://www.ddcat.net/blog/templates/ddcat2007/img/logo.gif" alt="img" /> </li> </ul> </body> </html>
[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
相关文章
CSS中expression使用简介
合理使用HTML标签进行CSS布局
不用script仅用css编写无限分级弹出菜单
IE6/IE7和Firefox对Div处理的差异
如何消除背景
DIV+CSS为什么好?(更新)
Div+CSS布局入门教程--写入整体层结构与CSS
在CSS中合理运用整体布局声明
Div+CSS布局入门教程--写入整体层结构与CSS
XHTML+CSS布局之XHTML应用小结
如何用CSS让文字居于div的底部
三种方法实现实时切换CSS样式
div css教程[1]
兼容 IE 和 FF 的换行 CSS 推荐样式
纯css实现经典鼠标触发显示选项
巧妙运用CSS样式表立刻改变鼠标的样式