css js perfectly controls image size_javascript skills

Use js and css to control the reality of the image within a fixed area, scale it proportionally if it is larger than this area, and display it in the center if it is smaller than this area.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>css js perfectly controls image size</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> <ul class="jobGroup"> <li> <a href="http://www.jb51.net"><div class="group_head"><p><img style="max-width:90%" style="max-width:90%" src="http://www.baidu.com/img/baidu_logo.gif" onload="DrawImage(this);" alt="css js perfectly controls image size_javascript skills" ></p></div></a> </li> </ul>