# hy-image

## Usage

Defaults to 16/9 aspect ratio if none is provided. Caption is optional.

<hy-image
  image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
  image-alt="Test image"
  aspect-ratio-width=16
  aspect-ratio-height=9
  caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
/>

```html
<hy-image
  image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
  image-alt="Test image"
  aspect-ratio-width=16
  aspect-ratio-height=9
  caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
/>

```

<!-- Auto Generated Below -->


## Properties

| Property            | Attribute             | Description | Type     | Default     |
| ------------------- | --------------------- | ----------- | -------- | ----------- |
| `aspectRatioHeight` | `aspect-ratio-height` |             | `number` | `9`         |
| `aspectRatioWidth`  | `aspect-ratio-width`  |             | `number` | `16`        |
| `caption`           | `caption`             |             | `string` | `null`      |
| `imageAlt`          | `image-alt`           |             | `string` | `null`      |
| `imageUrl`          | `image-url`           |             | `string` | `undefined` |


## Dependencies

### Used by

 - [hy-cta-liftup-image-text](../cta-liftup-image-text)

### Graph
```mermaid
graph TD;
  hy-cta-liftup-image-text --> hy-image
  style hy-image fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Helsinki University Design System