css 实现正方形

最新推荐文章于 2025-02-06 10:13:45 发布

置顶「已注销」

最新推荐文章于 2025-02-06 10:13:45 发布

阅读量1.7k

点赞数

分类专栏： html/css 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_23539027/article/details/86541023

版权

html/css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用CSS实现正方形布局，适用于导航、图片和二维码等场景。通过设置宽度为百分比，如25%，并利用高度自动填充剩余空间，达到正方形效果。示例代码包括HTML结构和CSS样式，同时提供了在图片上添加文字的处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

宽度呢,使用的是百分比,比如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>

效果: