# AspectRatio

This component ensures its content maintains a specified aspect ratio, adjusting its size responsively while preserving visual proportions.

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

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

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**
Set a default aspect ratio of 16:9 if no ratio is provided as a prop.

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

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

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>
  );
};
```