📜  使用 CSS 保持 div 的纵横比

📅  最后修改于: 2021-11-10 04:20:34             🧑  作者: Mango

为了使用 CSS 保持 div 的纵横比,创建灵活的元素,在调整浏览器窗口大小时保持其纵横比(4:3、16:9 等)。
什么是纵横比?
元素的纵横比描述了其宽度和高度之间的比例关系。两种常见的视频纵横比是 4:3 和 16:9。
要保持 div 的纵横比,请为 padding-top 添加一个百分比值。不同的纵横比有不同的百分比值。其中一些如下所示:

aspect ratio  | padding-top value
--------------|----------------------
    1:1       |       100%
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

句法:

element {
    padding-top: %value;
}

例子:

html


    
        
        
        
    
        
            
                
GeeksforGeeks
                 

A Computer Science portal for geeks. It                 contains well written, well thought and well                 explained computer science and programming                 articles, quizzes etc. Also it contains several                 coding questions to practice and develop your                 skills in programming.

              
        
    


输出:

方面

上述示例的输出设置为 16:9 的纵横比。调整窗口大小以查看效果。还要更改纵横比的相应值,以在浏览器窗口中查看所需的更改。