A-A+

纯css实现宽高等比

2015年12月30日 全部, 前端, 技术 暂无评论 阅读 145 次浏览 次

动态实现宽高相等以及其它比例,一般使用的是JS。这次介绍一种使用纯CSS实现的方法。

基础结构与样式:

<div class="box">
</div>
.box{
    width:100px;
    background-color:#ddd;
}

1.宽:高 = 1:1

.box:after{
    content:'';
    display:block;
    padding-top:100%;
}

2.宽:高 = 1:2

.box:after{
    content:'';
    display:block;
    padding-top:200%;
}

3.宽:高 = 2:1

.box:after{
    content:'';
    display:block;
    padding-top:50%;
}

动态修改一下宽度,会发现高度会自动跟着变化,并保持相应比例。

原理很简单,首先看下padding的取值:

length: 长度表示法 percentage: 百分比表示法,padding百分比的计算是基于生成的框的包含块的宽度 auto: 自动

百分比的参考值是包含块的宽度,所以padding值的变化会随着宽度变化,其实颜色块的高度padding撑起来的。

标签:

给我留言

Copyright © 前端黑板报 保留所有权利.   Theme  Ality 沪ICP备18002623号-2

用户登录