您的位置：首頁技術文章
文章詳情頁

css3 - 純CSS實現寬度是百分比的元素成為一個正方形，適配各種屏幕？

瀏覽：86日期：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='http://www.wxshucaidpc.com/wenda/一張與背景相同或透明的正方形圖片' style='width:100%;'><p style='position:absolute;top:0;left:0;'> 文字內容</p> </p></body>

標簽： CSS
国产综合久久一区二区三区