基础 CSS 响应式嵌入长宽比

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，它使设计美观的响应式网站、应用程序和电子邮件变得容易，这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。该框架建立在类似 SaaS 的引导程序之上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 SaaS 的引导程序之上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

响应式嵌入组件有助于将嵌入的媒体内容（如视频、地图、日历等）封装在响应式嵌入容器中，以保持正确的纵横比，而与屏幕大小无关。为了确保嵌入的纵横比与屏幕大小无关，请使用.responsive-embed类将嵌入元素包装在容器中。 Aspect Ratios类允许您更改响应式嵌入的纵横比。默认比例为4:3。 .widescreen类有助于将容器的纵横比更改为16:9 。

基础 CSS 响应式嵌入长宽比类：

• 默认值：默认情况下，这是继承的嵌入比例 (4:3)。因此，每当用户应用响应式嵌入类时，响应式嵌入的纵横比为 4:3。
• 宽屏： Foundation 为用户提供了另一种响应式嵌入的宽高比选择，即宽屏比例或 16:9。要应用 16:9 的纵横比，请将.widescreen类添加到.responsive-embed类。

语法：

示例：以下示例演示了具有默认比例的响应式嵌入类，即4:3 。

HTML

  

      
    
    

  

    
        

            GeeksforGeeks
        
        

            Foundation CSS Responsive Embed Default
        
        

            
        
    

输出：

响应式嵌入默认纵横比

示例： 下面的示例演示了具有宽屏比例的响应式嵌入类，即16:9 。

HTML

  

      
    
    

  

    
        

            GeeksforGeeks
        
        

            Responsive Embed Widescreen Aspect Ratio
        
        

            
        
    

  

输出：

响应式嵌入宽屏宽高比

参考： https://get.foundation/sites/docs/responsive-embed.html#aspect-ratio