css定义等比例缩放发区域宽高

CSS代码:

overflow : hidden ;

height : 0 ;

padding-bottom : xx% ;


原理:

区域的高度为0

此时高度由padding-bottom撑开并保持,百分比宽度

百分比padding均使用父元素宽度计算(即:高度与宽度成比例)

再把height设置溢出隐藏

由于高度为0,该元素的子元素overflow溢出到padding所在的区域

(当用百分比定义高宽的时候以及padding的时候,paddingmargin都是相对于父元素的宽度来计算的)


改变浏览器大小时,或者移动端页面时,实现等比例适应大小

猜你喜欢

转载自blog.csdn.net/kingAn123/article/details/80981813
今日推荐