css3 - 纯CSS实现宽度是百分比的元素成为一个正方形，适配各种屏幕？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css3 - 纯CSS实现宽度是百分比的元素成为一个正方形，适配各种屏幕？

PHP中文网 2017-04-17 11:20:19

[CSS3讨论组]

788

如题，一个p,设置width:30%,如何让它的高度和宽度一样大小，并且随着宽度的变化而变化？

前提：不使用js代码

<body>
   <p style='width:30%'></p>
</body>

PHP中文网

认证高级PHP讲师

全部回复(3)

ringa_lee2017-04-17 11:22:19 3楼

<body>

<p style="width:30%;padding-bottom:30%;height:0px;background:#ccc;"></p>

</body>

设置高度为0,防止有内容时高度溢出

赞 +0

添加回复

ringa_lee2017-04-17 11:22:19 2楼

赞 +0

添加回复

阿神2017-04-17 11:22:19 1楼

<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>

赞 +0

添加回复