使用场景
例如，一行显示四张图片，这样每张图片都占屏幕宽度的 25%。
但是纯 CSS 如何实现高度如何跟宽度保持一致，构成一个正方形 DIV 呢？
方法一
.square {
width: 25vw;
height: 25vw;
}
vw: viewport-percentage length，100vw 即整个屏幕的宽度。
例如，你的屏幕分辨率为 1920px，100vw 即为 1920px。
对应的，还有 vh，即高度百分比。
方法二
.square {
width: 25%;
padding-bottom: 20%;
}
这个方法确实有效，但是 padding-bottom: 20%; 是什么黑科技？
看了半天没看懂介绍。。。
但确实有效。
参考
https://stackoverflow.com/questions/19068070/how-to-style-a-div-to-be-a-responsive-square
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式