CSS 实现自适应的正方形 DIV

使用场景

例如，一行显示四张图片，这样每张图片都占屏幕宽度的 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 聊聊， 查看更多联系方式