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;
            z-index:99;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>

基本上就ok了.当然咯,如果你要在图片上加文字.同样的方法:

//css
        .header p{
            position:absolute;
            left:0;
            right:0;
            bottom: 0;
            text-align: center;
            z-index: 102;
            height: 60px;
            line-height: 60px ;
            font-size: 36px;
            color: #fff;
        }

//html
    <div class="header">
        <div class="dummy"></div>
        <img src="https://xiaolijian.org.cn/img/img_3.jpg" alt="">
        <p>行走的CD</p>
    </div>

效果:

当然咯,如果您看到这一篇博客后有更好的写法可以留言,欢迎探讨......