使用 CSS 保持 div 的纵横比

为了使用 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%

句法：

elemenet {
    padding-top: %value;
}

例子：

    
        
        
        
    
        
 
            

                
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 的纵横比。调整窗口大小以查看效果。还要更改纵横比的相应值，以在浏览器窗口中查看所需的更改。