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

css savalone 1632 Views

方法一：


效果：

QQ截图20190629144933.jpg

说明：


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>

打赏

取消

感谢支持 Savalone !

扫码支持

打开支付宝扫一扫，即可进行扫码打赏哦

「本文由 Savalone 原创或搜集整理发布，转载请遵守 CC BY-NC-ND 4.0 许可！」
  • 23