文章标题

来源：互联网发布：运动减肥软件下载编辑：程序博客网时间：2024/06/03 17:10

盒子自适应—宽高比值固定

多用于移动端的项目

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>盒子自适应—宽高固定比例</title>    <style>        *{            /*margin: 0;            padding: 0;            box-sizing: border-box;*/        }        /*以上全局样式 可有可无 根据实际项目决定*/        #box{            max-width: 100%;            padding-bottom: 50%;            height: 0;            overflow: hidden;            background-color: pink;        }        /*1.max-width 让宽度自适应         *2.padding-bottom 是盒子真正的高度         *  因此，盒子的宽高比值是100%:50%(2:1)         *3.由于用2实现了盒子的高度,盒子的height是0         *4.overflow 溢出的部分可以隐藏          *5.小demo为了能看见盒子，设置背景颜色         *6.修改以上两个百分比 即可修改宽高比值*/    </style></head><body>    <div id="box">        <p>此盒子的宽高比值是2:1(100%:50%)</p>    </div></body></html>

阅读全文

0 0