如题，一个p,设置width:30%,如何让它的高度和宽度一样大小，并且随着宽度的变化而变化？
前提：不使用js代码
<body> <p style='width:30%'></p> </body>
认证高级PHP讲师
<body>
<p style="width:30%;padding-bottom:30%;height:0px;background:#ccc;"></p>
</body>
Set the height to 0 to prevent the height from overflowing when there is content
<body> <p style='width:30vw; height:30vw;'></p></body>
<body> <p style="width:30%;position:relative;overflow:auto;"> <img src="一张与背景相同或透明的正方形图片" style="width:100%;"> <p style="position:absolute;top:0;left:0;"> 文字内容 </p> </p> </body>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<body>
</body>
Set the height to 0 to prevent the height from overflowing when there is content
<body>
<p style='width:30vw; height:30vw;'></p>
</body>