这里需要用到jquery ＋ css。原理是在页面加载时用javascript去动态改变一个class的高度和宽度。这样结合javascript能动态获取浏览器／页面的高度和宽度，从而使得div能动态的跟随浏览页面的大小变化而变化并且不影响高宽比。下面的代码创建一个手机页面，每一行三个图片分占33%，每个图片div的高和宽会随着浏览器的大小变化而自适应。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <title>test photoview</title> </head> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> function pageload() { var size = { window.innerWidth || document.body.clientWidth, height: window.innerHeight || document.body.clientHeight } var cw = (size.width - 60) / 3; $('.autowidth').css({ 'width': cw + 'px' }); $('.autowidth').css({ 'height': cw + 'px' }); } window.onload = pageload; </script> <style> .bodyclass{ background-color:#dedbdb; } .studentblock { font-family:微软雅黑; } .studentblock:hover { border:2px solid blue; border-color:blue; cursor:pointer; } .autowidth { height:100px; background-size:cover; margin-left:8px; margin-top:0px; } .autohover { border: 2px solid blue; cursor: pointer; } .tdsection { 33%; padding-bottom:5px; } </style> <body class="bodyclass"> <div style="100%;height:1000px;overflow-x:hidden;overflow-y:hidden;"> <table style="100%"> <tr> <td class="tdsection"> <div class="autowidth" style="background-image:url('image/people1.jpg');"></div> <div style="background-color:#ffffff;margin-left:8px;font-family:微软雅黑;text-align:center;">春游</div> </td> <td class="tdsection"> <div class="autowidth" style="background-image:url('image/people1.jpg');""></div> <div style="background-color:#ffffff;margin-left:8px;align-content:center;font-family:微软雅黑;text-align:center;">春游</div> </td> <td class="tdsection"> <div class="autowidth" style="background-image:url('image/people1.jpg');"></div> <div style="background-color:#ffffff;margin-left:8px;align-content:center;font-family:微软雅黑;text-align:center;">春游</div> </td> </tr> </table> </div> </body> </html>