如何实现HTML元素的宽高自适应？-IT学习资源网

要实现HTML元素的宽高自适应，可以使用CSS中的相对单位和一些布局技巧。以下是具体的解决方案：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .content {
            width: 80%;
            height: 80%;
            background-color: #f2f2f2;
            text-align: center;
            line-height: 80%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <h1>宽高自适应内容</h1>
            <p>这是一个宽高自适应的示例</p>
        </div>
    </div>
</body>
</html>

在CSS样式中，使用width: 100%和height: 100vh来让container元素充满整个视窗，并且高度自适应。使用display: flex来启用弹性布局，并使用justify-content: center和align-items: center来使其内容水平垂直居中。

在content元素中，使用width: 80%和height: 80%来设置其宽高为父容器的80%，从而实现自适应效果。通过设置background-color、text-align和line-height等属性，可以进一步样式化内容。

通过以上操作，就可以实现HTML元素的宽高自适应，无论是在不同尺寸的设备上还是在不同屏幕分辨率下，元素都能自动调整大小以适应页面。