frame
Hold an aspect ratio; crop media to fit. Uniform thumbnails from chaotic images.
Example
16:9 (default)
square
4:3
--ratio: 21/9
Basic usage
<m-frame ratio="square">
<img src="photo.jpg" alt="…">
</m-frame>API
Attributes
| Name | Type/Values | Default | Description |
|---|---|---|---|
ratio | square · 16:9 · 4:3 · 3:2 · 2:1 · 9:16 | 16:9 | Sets the frame's aspect ratio. |
Content/markup contract
| Name | Type/Values | Default | Description |
|---|---|---|---|
| Direct media | img · video | — | Fills the frame and crops with object-fit: cover. |
| Picture media | picture > img | — | The image fills the frame and crops with object-fit: cover. |
| Other content | any element | — | Centers in the frame. |
Styling
| Name | Type/Values | Default | Description |
|---|---|---|---|
--ratio | CSS ratio | 16 / 9 | Accepts any fraction, for example style="--ratio: 21 / 9". |