资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
css+js完美控制图片大小
使用js和css讲图片的现实控制在固定的区域内，大于这个区域的等比例缩放，小于这个区域的居中显示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css+js完美控制图片大小</title> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20language%3D%22JavaScript%22%3E%20%0D%0A%3C!--%20%0D%0Avar%20flag%3Dfalse%3B%20%0D%0Afunction%20DrawImage(ImgD)%7B%20%0D%0A%20%20%20%20var%20image%3Dnew%20Image()%3B%20%0D%0A%20%20%20%20image.src%3DImgD.src%3B%20%0D%0A%20%20%20%20if(image.width%3E0%20%26%26%20image.height%3E0)%7B%20%0D%0A%20%20%20%20%20%20%20%20flag%3Dtrue%3B%20%0D%0A%20%20%20%20%20%20%20%20if(image.width%2Fimage.height%3E%3D%20400%2F400)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(image.width%3E400)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ImgD.width%3D400%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ImgD.height%3D(image.height*400)%2Fimage.width%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ImgD.width%3Dimage.width%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ImgD.height%3Dimage.height%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20ImgD.alt%3Dimage.width%2B%22x%22%2Bimage.height%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(image.height%3E400)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ImgD.height%3D400%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ImgD.width%3D(image.width*400)%2Fimage.height%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ImgD.width%3Dimage.width%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ImgD.height%3Dimage.height%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20ImgD.alt%3Dimage.width%2B%22x%22%2Bimage.height%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> <style type="text/css"> <!-- * { margin:0; padding:0; } li { list-style:none; } img { border:0; } .group_head { width:400px; height:400px; line-height:400px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center; float:left; margin-right:10px; } .group_head p { position:static; +position:absolute; top:50%; vertical-align:middle } .group_head img { position:static; +position:relative; top:-50%;left:-50%; vertical-align:middle } --> </style> </head> <body> <ul class="jobGroup"> <li><a href="http://www.glzy8.com" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com"><div class="group_head"><p><img width="400" height="400" src="http://www.baidu.com/img/baidu_logo.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.baidu.com%2Fimg%2Fbaidu_logo.gif" onload="DrawImage(this);"/></p></div></a> </li> </ul> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程