CSS代码:
overflow : hidden ;
height : 0 ;
padding-bottom : xx% ;
原理:
区域的高度为0
此时高度由padding-bottom撑开并保持,百分比宽度
百分比padding均使用父元素宽度计算(即:高度与宽度成比例)
再把height设置溢出隐藏
由于高度为0,该元素的子元素overflow溢出到padding所在的区域
(当用百分比定义高宽的时候以及padding的时候,padding
和margin
都是相对于父元素的宽度来计算的)
改变浏览器大小时,或者移动端页面时,实现等比例适应大小