用【CSS】如何实现当盒子的宽度为百分比的时候，让盒子的高度始终等于盒子的宽度，保持正方形的状态

最新推荐文章于 2023-10-22 22:29:29 发布

芒种017

最新推荐文章于 2023-10-22 22:29:29 发布

阅读量6.7k

点赞数 1

分类专栏：前端 htm css 文章标签：用【CSS】如何实现当盒子的宽度为百分比的时候，让盒子的高度正方形自适应宽度和高度的做法

本文链接：https://blog.csdn.net/weixin_41848880/article/details/88714696

版权

前端同时被 3 个专栏收录

18 篇文章 1 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

htm

11 篇文章 0 订阅

订阅专栏

一、PC端和移动端的屏幕分辨率多种多样，当盒子的宽度为百分比时，让宽度和高度始终保持相等的方法

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <style type="text/css">
            ul{ width: 80%; margin: 30px auto;}
            ul li{  border: 1px solid #999;  list-style: none; float: left; margin-right: 1%; position: relative; width: 16%; height: 100%;}
            ul li::before{ content: ""; padding-top: 100%; vertical-align: middle; display: block;}

            ul li span{ position: absolute; top: 50%; left: 50%; 
                        -webkit-transform: translate(-50%, -50%);
                           -moz-transform: translate(-50%, -50%);
                            -ms-transform: translate(-50%, -50%);
                             -o-transform: translate(-50%, -50%);
                                transform: translate(-50%, -50%);}
        </style>
    </head>
    <body>
    <!-- 当宽度为百分比的时候，如何让盒子始终保持正方形的状态 -->

    <ul>
        <li>
            <span>1</span>
        </li>
        <li>
            <span>2</span>
        </li>
        <li>
            <span>3</span>
        </li>
        <li>
            <span>4</span>
        </li>
        <li>
            <span>5</span>
        </li>
    </ul>
    </body>
</html>

说明：

1、将盒子的宽度设置为自己需要的百分比，这里以16%为例；

2、将盖盒子的高度设置为100%；

3、通过伪类控制高度（**************）

ul li::before{ content: ""; padding-top: 100%; vertical-align: middle; display: block;}

4、盒子里面的内容一定要定位，如例子中的span（******************）

ul li span{ position: absolute; top: 50%; left: 50%; 
                        -webkit-transform: translate(-50%, -50%);
                           -moz-transform: translate(-50%, -50%);
                            -ms-transform: translate(-50%, -50%);
                             -o-transform: translate(-50%, -50%);
                                transform: translate(-50%, -50%);}

5、这样就实现了，无论设备的分辨率怎么变化，这个盒子始终都是正方形的宽度啦！！！！！！