文章詳情頁
css3 - 純CSS實現寬度是百分比的元素成為一個正方形，適配各種屏幕？
瀏覽：122日期：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.gepszalag.com/wenda/一張與背景相同或透明的正方形圖片' style='width:100%;'><p style='position:absolute;top:0;left:0;'> 文字內容</p> </p></body>
標簽：
CSS
排行榜
網公網安備