>  Q&A  >  본문

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

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

前提:不使用js代码

<body>
   <p style='width:30%'></p>
</body>
PHP中文网PHP中文网2764일 전611

모든 응답(3)나는 대답할 것이다

  • ringa_lee

    ringa_lee2017-04-17 11:22:19

    <body>

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

    </body>


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

    회신하다
    0
  • ringa_lee

    ringa_lee2017-04-17 11:22:19

    <body>
    <p style='width:30vw; height:30vw;'></p>
    </body>

    회신하다
    0
  • 阿神

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

    <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
  • 취소회신하다