Frame (<e-frame>)

The e-frame component creates a container that maintains a specific aspect ratio. It’s useful for embedding videos or images while preserving their proportions. Content inside the frame (like <img> or <video>) is typically styled to cover the frame area.

Basic Usage

<e-frame ratio="16:9">
  <img src="/e-layout/hd720.png" alt="Placeholder">
</e-frame>

Examples

Square Frame: ratio="1:1"

Placeholder

4:3 Frame: ratio="4:3"

Placeholder

Wide Frame: ratio="2:1"

Placeholder

Properties

  • ratio <string> (Default: '16:9')
    • The desired aspect ratio, formatted as 'N:D' or 'N/D' (e.g., '16:9', '1/1', '4/3'). Maps to CSS variables --n and --d. Attribute: ratio.
  • tag <string> (Default: undefined)
    • Provides a semantic hint (e.g., ‘figure’). Does not change the rendered tag. Useful for CSS selectors (e-frame[tag="..."]). Attribute: tag.