Littleor

739 分类: 前端

非固定宽高百分比布局设置宽高比纯CSS

最近遇到个小问题一直不知道怎么解决,就是如何在百分比布局中高度用宽度的百分比.
即:

<div class='demo'></div>

.demo{
width: 100%;
height: auto;
}

这种时候height是根据本身高度自动调整的,那么如何做到height和width成比呢?
接下来就要介绍下百分比布局的一些细节了:
所谓的padding-bottom:100%中百分比是按宽度来算的而不是高度,故可以借此来实现百分比布局宽高成比例.
如下:

<div class='demo'></div>

.demo{
width: 100%;
padding-bottom: 100%;
}

#none

作者: Littleor

版权: 除特别声明,均采用BY-NC-SA 4.0许可协议,转载请表明出处

目录Content

仅有一条评论

  1. 11 11

    11111111111111111111111111111111111111111

评论