CSS 实现自适应的正方形 DIV

更新日期: 2020-03-10 阅读次数: 5805 字数: 163 分类: CSS

使用场景

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