# AspectRatio

A utility component to render content while maintaining a specific aspect ratio.

### **Import**
```tsx
import { AspectRatio } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { Image } from 'app-studio';
import { AspectRatio } from '../AspectRatio';

export const DefaultDemo = () => {
  return (
    <AspectRatio>
      <Image
        alt="image"
        objectFit="cover"
        width="100%"
        height="100%"
        src="https://t3.ftcdn.net/jpg/02/82/15/88/360_F_282158853_VtXRiSiN5eCjPddHobErJewxJ65lYZGt.jpg"
      />
    </AspectRatio>
  );
};
```

### **ratio**
Sets the aspect ratio for the content. For example, 16/9 for a widescreen format.

- **Type:** `number`
- **Default:** `16 / 9`
- **Possible Values:** `N/A`

```tsx
import React from 'react';
import { Image } from 'app-studio';
import { AspectRatio } from '../AspectRatio';

export const RatioDemo = () => {
  return (
    <AspectRatio ratio={4 / 3} width={300}>
      <Image
        alt="image"
        objectFit="cover"
        width="100%"
        height="100%"
        src="https://t3.ftcdn.net/jpg/02/82/15/88/360_F_282158853_VtXRiSiN5eCjPddHobErJewxJ65lYZGt.jpg"
      />
    </AspectRatio>
  );
};
```

### **Index**

```tsx
export * from './default';
export * from './ratio';
```