学习日记--等比例缩放div

昨天做页面的时候遇到了一个问题，“等比例缩放div”

搜索了一下有很多办法，但相对来说都复杂而且效果不佳。我认为能用最简单办法达成目标的人才是真正的高手（我不是，但在努力），一个知识点超过5分钟还不能让人理解那只能说明自己能力不够。
于是自己总结了两个20秒之内理解的办法。

方法一：height使用vw

<style>
       .parent {
            width: 100%;
            height: 30vw; // 注意这里使显示宽度百分百
            background: #ccc;
        }
        .child{
            dispaly:flex;
            justify-content:center;
            align-items: center;
        }
 </style>

<body>
    <div class="parent">
        <div class="child">居中内容</div>
    </div>
</body>

缺点：兼容不好

方法二： 思路：盒子模型的margin 和 padding 的百分比都只根据div的width

<style>
        .parent{
            width:100%;
            height:0;
            background: blue;
            padding-bottom:30%;  // 把盒子撑起来
posted @ 2022-12-06 22:21  轻风细雨_林木木  阅读(183)  评论(0)  编辑  收藏  举报