版权声明:本文为博主原创文章,部分内容为借鉴理解。 https://blog.csdn.net/weixin_35773751/article/details/88563941
昨天做页面的时候遇到了一个问题,“等比例缩放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%; // 把盒子撑起来
}
.child{
width: 100%;
height: auto;
background: red;
}
</style>
<body>
<div class="parent">
<div class="child">1231</div>
</div>
</body>
总结:还有很多其他办法,但个人觉得这两个最简单