让图片等比例自动适应内容大小

2008年8月13日

让图片等比例自动适应内容大小

Filed under: JAVASCRIPT — 标签：JAVASCRIPT — FDS @ 17:22

在内容区显示图片，经常会碰到图片过大，把内容区破坏了，而固定了图片的大小后，会让图片失去比例，导致很难看。
这里介绍一个办法，让图片在内容区显示的时候，等比例自动适应。
请看下面的例子：

<!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; } } if ( imgElements[j].height < heightRestriction ) { imgElements[j].style.paddingTop = ( heightRestriction -imgElements[j].height ) /2 + "px"; } } /*for j*/ } }/*for i*/ } window.onload = imgFix; </script> <style type="text/css">  </style> </head> <body> <ul > <li><img src="http://img1.cache.netease.com/photo/0074/2008-08-13/4J84FRHV06P30074.jpg" class="imgBox" /></li> <li><img src="http://img1.cache.netease.com/photo/0074/2008-08-13/4J85IGM906P30074.jpg" class="imgBox" /></li> <li><img src="http://img1.cache.netease.com/photo/0074/2008-08-13/4J85UIP906P30074.jpg" class="imgBox" /></li> </ul> </body> </html>

提示：你可以先修改部分代码再运行。

Comments (0)

评论暂缺 »

还没有任何评论。

这篇文章上的评论的 RSS feed TrackBack URL

FDS’s Blog

2008年8月13日

让图片等比例自动适应内容大小

评论暂缺 »

留下评论