本文介绍如何使用CSS和JavaScript结合的方式，将图片控制在固定区域内。当图片尺寸超过设定区域时，自动进行等比例缩放；当图片尺寸小于设定区域时，则实现居中显示，确保页面布局的整洁与美观。
图片自适应控制原理
通过结合JavaScript与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> <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需再刷新一下页面才能执行]