CSS与JS结合实现图片自适应大小控制

代码实现示例

<!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>  <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 src="/uploads/20261023/57a9706fc72582a75ea3dea65637814e9a5f936d727d6de96efb4055aea0568c.gif" /></p></div>          </li>                </ul> </body> </html>

注意事项

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]