当前位置：首页 >> 网站建设 >> 正文

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">    </script>  <style type="text/css">    </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 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

相关文章

js+css图片自动等比例缩小

版权隐私 免责声明 友情链接 学院地图 关于设计学院

版权隐私　　免责声明　　友情链接　　学院地图　　关于设计学院