文章详情页
css3 - 纯CSS实现宽度是百分比的元素成为一个正方形，适配各种屏幕？
浏览：89日期：2023-07-26 08:08:31
问题描述
如题，一个p,设置width:30%,如何让它的高度和宽度一样大小，并且随着宽度的变化而变化？
前提：不使用js代码
<body> <p style=’width:30%’></p></body>
问题解答
回答1：<body>
<p style='width:30%;padding-bottom:30%;height:0px;background:#ccc;'></p>
</body>
设置高度为0,防止有内容时高度溢出
回答2：<body> <p style=’width:30vw; height:30vw;’></p></body>
回答3：<body> <p style='width:30%;position:relative;overflow:auto;'><img src='https://www.haobala.com/wenda/一张与背景相同或透明的正方形图片' style='width:100%;'><p style='position:absolute;top:0;left:0;'> 文字内容</p> </p></body>
标签：
CSS
排行榜
网公网安备