CSS

CSS实现元素宽高比自适应

Posted by fengmiaosen on 2016-08-31

前端开发需求经常需要适配不同尺寸的屏幕，有时需要保证某些元素在不同屏幕下仍然能保持宽高比自适应，即所谓的响应式开发要求。
而通过纯CSS来实现的核心技术要点是：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物。这里列举了常用的三种方法来实现宽高自适应。

方法一： 设置元素的padding-top 或者 padding-bottom

由于元素竖直方向的padding-top和padding-bottom属性使用百分比来赋值时，是相对元素最近的父容器宽度 width来计算，所以我们可以利用这个特性来保证不同屏幕条件下的元素等宽高比。
例如：一个div元素的宽度是 100px，设置其padding-top 为75%，则计算所得为75px，宽高比为4:3；如果width为20%，padding-top为75%，计算后padding-top为20% * 75%，最终宽高比仍然为 4:3。

使用方法

1
2
3
4
5
div {
    height: 0;
    width: 100%;
    padding-bottom: 75%; /* 4:3 */
}

盒模型示意

box

示例demo

方法二： 使用伪类 ::before 或 ::after 设置padding属性

使用方法

1
2
3
4
5
6
7
8
9
10
.element {
    width: 20%; 
    position: relative;
}
.element:before {
    display: block;
    content: "";
    padding-top: 75%; /* 4:3 */
}

示例demo

方法三： 使用视区相关单位vm、vh单位设置元素宽高

单位含义

视窗viewport — 为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小
vm — 相对于视窗的宽度：视窗宽度是100vm，假设视窗的像素宽度是 500px，则1vw == 5px
vh — 相对于视窗的宽度：视窗宽度是100vh

浏览器兼容性支持

点击查看
vmvh

使用方法

1
2
3
4
.element {
    width: 20vw;
    height: 15vw;
}

示例demo

参考资料

FEATURED TAGS
CSS
FRIENDS