首页 > 代码库 > 如何自动在html页面加载时动态改变div等元素的高度和宽度
如何自动在html页面加载时动态改变div等元素的高度和宽度
这里需要用到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=http://www.mamicode.com/"js/jquery-1.11.1.min.js"></script><script type="text/javascript"> function pageload() { var size = { width: 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; } .autowidth:hover { border: 2px solid blue; cursor: pointer; } .tdsection { width:33%; padding-bottom:5px; }</style><body class="bodyclass"><div style="width:100%;height:1000px;overflow-x:hidden;overflow-y:hidden;"> <table style="width: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>
如何自动在html页面加载时动态改变div等元素的高度和宽度
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。