PHP基础
PHP教程
php框架
JavaScript
asp.net
AJAX
正则表达式
ASP
输入
banner图
图片脚本
导航/分类
css+js完美控制图片大小_javascript技巧
使用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> <script type="text/javascript" language="JavaScript"> <!-- var flag=false; function DrawImage(ImgD){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ flag=true; if(image.width/image.height>= 400/400){ if(image.width>400){ ImgD.width=400; ImgD.height=(image.height*400)/image.width; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt=image.width+"x"+image.height; } else{ if(image.height>400){ ImgD.height=400; ImgD.width=(image.width*400)/image.height; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt=image.width+"x"+image.height; } } } //--> </ script> <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><div class="group_head"><p><img width="400" height="400" src="http://www.baidu.com/img/baidu_logo.gif" onload="DrawImage(this);"/></p></div> </li> </ul> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
