重庆网站建设的公司哪家好,网业制作,wordpress国外模板,室内设计平面图上色今天群里有哥们问了一下#xff0c;百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。第一个方法利用图片的等比例缩放#xff0c;用base64写一个1*1的透明png图片#xff0c;宽度100%#xff0c;这样容器就自动被撑成一个正方形#xff0c;demo如…今天群里有哥们问了一下百分比宽度的正方形如何用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 : ;}提示你可以先修改部分代码再运行。恩这样看起来是不是清爽多了。
