## AspectRatio  
Use the Aspect component to maintain responsive consistent width/height ratio.  
Category: Layout  

### Image 

```python
import dash_mantine_components as dmc

component = dmc.AspectRatio(
    dmc.Image(
        src="https://www.nasa.gov/wp-content/uploads/2022/07/web_first_images_release.png",
        alt="Carina Nebula",
    ),
    ratio=4/3,
)
```
### Map embed

```python
import dash_mantine_components as dmc
from dash import html

component = dmc.AspectRatio(
    html.Iframe(
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3025.3063874233135!2d-74.04668908358428!3d40.68924937933441!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue%20of%20Liberty%20National%20Monument!5e0!3m2!1sen!2sru!4v1644262070010!5m2!1sen!2sru",
        title="Google map",
    ),
    ratio=16 / 9,
)
```
### Video embed

```python
import dash_mantine_components as dmc
from dash import html

component = dmc.AspectRatio(
    html.Iframe(
        src="https://www.youtube.com/embed/KsTKREWoVC4",
        title="YouTube video player",
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen",
    ),
    ratio=16 / 9,
)
```
### Inside flex container
By default, `AspectRatio` does not have fixed width and height, it will take as much space as possible in a regular
container. To make it work inside flex container, you need to set `width` or `flex` property.

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    dmc.AspectRatio(
        ratio=1,
        style={"flex": "0 0 100px"},
        children=[
            dmc.Image(
                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-6.png",
                alt="Avatar",
            )
        ],
    ),
    style={"display": "flex"},
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### AspectRatio Selectors

| Selector | Static selector                 | Description   |
|----------|----------------------------------|---------------|
| root     | .mantine-AspectRatio-root        | Root element  |

---

#### AspectRatio CSS Variables

| Selector | Variable      | Description     |
|----------|---------------|-----------------|
| root     | --ar-ratio    | Aspect ratio    |




### Keyword Arguments
#### AspectRatio

- children (a list of or a singular dash component, string or number; optional)

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- ratio (number; optional):
    Aspect ratio, e.g. `16 / 9`, `4 / 3`, `1920 / 1080`, `1` by
    default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.