css实现未知宽度的正方形需求
今天群里有哥们问了一下，百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。
第一个方法利用图片的等比例缩放，用base64写一个1*1的透明png图片，宽度100%，这样容器就自动被撑成一个正方形，
demo如下
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<style type="text/css">
*{
margin:0;
padding:0;
}
.img{
display:inline-block;
margin: 1%;
width: 30%;
background: #ff6600;
}
.img img{
width: 100%;
display: block;
}
</style>
<div class="img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDMvMDYvMTVjL2fvAAAADUlEQVQImWP4//8/AwAI/AL+hc2rNAAAAABJRU5ErkJggg==" />
</div>
<div class="img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDMvMDYvMTVjL2fvAAAADUlEQVQImWP4//8/AwAI/AL+hc2rNAAAAABJRU5ErkJggg==" />
</div>
<div class="img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDMvMDYvMTVjL2fvAAAADUlEQVQImWP4//8/AwAI/AL+hc2rNAAAAABJRU5ErkJggg==" />
</div>
</body>
</html>
提示：你可以先修改部分代码再运行。
不过这样写的坏处是多了个img标签，看着不干净，于是想了另一种方法，就是利用padding的百分比值基于父容器宽度的特性，给div的after伪元素一个padding-top:100% 的值，这样就把高撑的和宽度一样了，demo如下：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
display:inline-block;
margin: 1%;
width: 30%;
background: #ff6600;
}
.box::after{
display: block;
padding-top: 100%;
content : '';
}
</style>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</body>
</html>
提示：你可以先修改部分代码再运行。
恩这样看起来是不是清爽多了。
