创新路
我们一直在努力

利用padding-bottom特殊属性,实现【等比例缩放】的盒子

实现盒子的等比例缩放,我们最常遇到的问题如图。

原始效果

1.jpg

当窗口宽度变小时上图的页面会变为如下所示:

1491988171966686.jpg

可见每个元素的宽度进行了缩放,但高度并没有变化,看起来并不是很协调。所以有些场景下我们需要实现当窗口宽度缩放时,使得元素宽度自适应的同时,保证每个元素的宽高比例不变。

解决方案:

padding-bottom,它有一个让人很容易忽略的特性是当它的值是百分比形式时,百分比的基数是其所在元素的父元素的宽度而不是高度(同 padding-left 和 padding-right 一样)。这样解决方案也就非常明显了:

将元素的 height 设成 0,使得元素的高度等于 padding-bottom;

合理设置 padding-bottom 的值。比如每个元素的 width 是 25%,现在想让元素的高度始终保持为其宽度的两倍,则 padding-bottom 的值应该设置为 50%。

<style type="text/css">
.item {
    float: left;
    width: 21%;
    margin: 10px 2%;
    height: 0;
    padding-bottom: 33.98%;
    background-color: #dbe0e4;
}
</style>

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

结果如下所示

1491988374845903.jpg

未经允许不得转载:天府数据港官方信息博客 » 利用padding-bottom特殊属性,实现【等比例缩放】的盒子

客官点个赞呗! (0)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机