css-宽高比固定自适应-浮动+absolute+padding-top




    
    高度自适应
    


    

图中三个DIV的宽高都会随着页面的大小保持原有比例放大或缩小。其核心思想就是利用padding来拓宽盒子高度。通过padding-top来设置百分比,使其百分比与宽度的百分比为需要的比例。这里需要注意的是:padding-top中设置的百分比与width中设置的百分比都是以父元素的width为参考的

你可能感兴趣的:(css)