css 实现正方形

往往在开发的时候会用到正方形,比如导航啊,图片啊,二维码啊,我就把我经常用到的写法分享出来吧,这个也是之前我的好朋友告诉我的.

宽度呢,使用的是百分比,比如25%.

首先html的结构是:

 <div class="header">
     <div class="dummy"></div>
     <img src="https://xiaolijian.org.cn/img/img_3.jpg" alt="">
</div>

然后是css:

    <style>
        .header{ 
            position: relative;
            width: 25%;
            overflow: hidden;
         }
        .header .dummy{
            margin-top: 100%;
        }
        .header img{
            position: absolute;
            top :0; 
            left: 0; 
            right: 0; 
            bottom:0;