预期效果：一行显示三张图片，宽度随屏幕宽度而改变。css3的新单位vw vh由于兼容性问题就不提了。
一个比较好的方案是：设置垂直方向的 padding 撑开容器
在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding的百分比数值计算。margin, padding的百分比数值是相对 父元素宽度的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding值设定为与 width相同的百分比就可以制作出自适应正方形了，代码如下：
.placeholder { ???width: 100%; ???height:0; ???padding-bottom: 100%;}css实现自适应正方形
原文地址：https://www.cnblogs.com/guagnxu/p/10008968.html