# AspectRatioPlaceholder

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/aspectRatioPlaceholder
*Captured:* 2026-04-27T14:58:14.201Z

Use the AspectRatioPlaceholder for having responsive elements with an aspect ratio.

## AspectRatioPlaceholder

### Example: Example 1

Default (16/9)

Custom (1/1)

Custom - same as image size (1000/600)

#### React (tsx)

```tsx
import AspectRatioPlaceholder from '@rio-cloud/rio-uikit/AspectRatioPlaceholder';
import Spinner from '@rio-cloud/rio-uikit/Spinner';

export default () => (
    <div className='row'>
        <div className='col-md-4'>
            <div className='h5 ellipsis-1'>Default (16/9)</div>
            <AspectRatioPlaceholder className='bg-primary display-grid place-items-center'>
                <span className='rioglyph rioglyph-heart text-size-h1 text-color-white' />
            </AspectRatioPlaceholder>
        </div>
        <div className='col-md-4'>
            <div className='h5 ellipsis-1'>Custom (1/1)</div>
            <AspectRatioPlaceholder className='border' width={1} height={1}>
                <Spinner isInverse={false} />
            </AspectRatioPlaceholder>
        </div>
        <div className='col-md-4'>
            <div className='h5 ellipsis-1'>Custom - same as image size (1000/600)</div>
            <AspectRatioPlaceholder className='border' width={1000} height={600}>
                <div
                    className='position-absolute inset-0 bg-size-cover'
                    style={{ backgroundImage: 'url(https://picsum.photos/1000/600)' }}
                />
            </AspectRatioPlaceholder>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="row">
    <div class="col-md-4">
        <div class="h5 ellipsis-1">Default (16/9)</div>
        <div class="position-relative bg-primary display-grid place-items-center" style="aspect-ratio: 16 / 9;">
            <span class="rioglyph rioglyph-heart text-size-h1 text-color-white">
            </span>
        </div>
    </div>
    <div class="col-md-4">
        <div class="h5 ellipsis-1">Custom (1/1)</div>
        <div class="position-relative border" style="aspect-ratio: 1 / 1;">
            <div class="spinnerInfoBox display-flex justify-content-center align-items-center height-100pct">
                <div class="spinner">
                    <div>
                    </div>
                    <div>
                    </div>
                    <div>
                    </div>
                    <div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="h5 ellipsis-1">Custom - same as image size (1000/600)</div>
        <div class="position-relative border" style="aspect-ratio: 1000 / 600;">
            <div class="position-absolute inset-0 bg-size-cover" style="background-image: url(&quot;https://picsum.photos/1000/600&quot;);">
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| height | number | 16 | Defines the aspect ratio width. |
| width | number | 9 | Defines the aspect ratio height. |
| className | string | — | Additional class names that are added to the wrapping element. |