CSS 当宽度为百分比的时候，如何让高等于宽

Savalone

发布于 2020-02-11 12:38:55

2.9K0

发布于 2020-02-11 12:38:55

文章被收录于专栏：Savalone's Blog

方法一：

效果：

说明：

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、这样就实现了，无论设备的分辨率怎么变化，这个盒子始终都是正方形的宽度啦！！

源码：

<!DOCTYPE html>
<html>
    <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>

方法二：

和上边的方法类似，把盒子模型从默认的 content-box 定义为 border-box，再通过 padding 把盒子模型撑开即可。

源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            ul{ width: 80%; margin: 30px auto;}
            ul li{ position:relative; background:red; border-right:1px solid #fff; list-style: none; float: left; width:20%; padding-top:20%; box-sizing: border-box; }
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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019年06月29日，如有侵权请联系 cloudcommunity@tencent.com 删除

block