@thebase/ui
Version:
CDN-installable Owl and Bootstrap 5 UI component library.
35 lines (27 loc) • 1.01 kB
Markdown
# Aspect Ratio
## Pure Owl component
```js
import { AspectRatio } from "@thebase/ui";
```
```base-ui
<div style="max-width: 28rem" class="w-100">
<AspectRatio ratio="'16 / 9'">
<img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80" alt="Image" class="rounded w-100 h-100" style="object-fit: cover"/>
</AspectRatio>
</div>
```
| Component | Prop | Type | Notes |
| --- | --- | --- | --- |
| `AspectRatio` | `ratio` | `String` | optional |
| `AspectRatio` | `width` | `Number` | optional |
| `AspectRatio` | `height` | `Number` | optional |
| `AspectRatio` | `className` | `String` | optional |
See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
## Static component
```base-ui
<div b-ui="aspect-ratio" b-att-ratio="16 / 9">
<div class="d-flex h-100 align-items-center justify-content-center bg-body-tertiary text-body-secondary">
16:9 preview
</div>
</div>
```