今天群里有哥們問了一下，百分比寬度的正方形如何用css實現。其實就是不定寬的正方形如何用css實現。

第一個方法利用圖片的等比例縮放，用base64寫一個1*1的透明png圖片，寬度100%，這樣容器就自動被撐成一個正方形，

demo如下

test

*{

margin:0;

padding:0;

}

.img{

display:inline-block;

margin: 1%;

width: 30%;

background: #ff6600;

}

.img img{

width: 100%;

display: block;

}

提示：你可以先修改部分代碼再運行。

不過這樣寫的壞處是多了個img標簽，看著不干凈，于是想了另一種方法，就是利用padding的百分比值基于父容器寬度的特性，給div的after偽元素一個padding-top:100% 的值，這樣就把高撐的和寬度一樣了，demo如下：

test

*{

margin:0;

padding:0;

}

.box{

display:inline-block;

margin: 1%;

width: 30%;

background: #ff6600;

}

.box::after{

display: block;

padding-top: 100%;

content : '';

}

提示：你可以先修改部分代碼再運行。

恩這樣看起來是不是清爽多了。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html 百分比正方形,css实现未知宽度的正方形需求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。