如何自动在html页面加载时动态改变div等元素的高度和宽度

最新推荐文章于 2023-10-20 08:48:32 发布

转载最新推荐文章于 2023-10-20 08:48:32 发布 · 598 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chunyih/p/4034145.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一种使用jQuery和CSS动态调整手机页面布局的方法，确保页面元素在不同设备上自适应并保持高宽比不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里需要用到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 = {
            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>