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

最新推荐文章于 2024-11-10 17:20:32 发布

芒种017

最新推荐文章于 2024-11-10 17:20:32 发布

阅读量7k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_41848880/article/details/88714696

前端同时被 3 个专栏收录

18 篇文章

订阅专栏

css

15 篇文章

订阅专栏

htm

11 篇文章

订阅专栏

博客介绍了在PC端和移动端，当盒子宽度为百分比时，让宽度和高度始终保持相等的方法。包括将盒子宽度设为所需百分比，高度设为100%，通过伪类控制高度，盒子内内容需定位，以此实现盒子始终为正方形。

一、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%);}