# gds-img

**Class**: `GdsImg`

**Tag**: `<gds-img>`


## Properties

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `'aspect-ratio'` | `string \| undefined` | `-` | Controls the aspect ratio of the image. Supports all common aspect ratios like 16/9, 4/3, 1/1, etc.  You can apply the aspect ratio like this: ```html <gds-img aspect-ratio="16/9"></gds-img> ``` The above example will apply the aspect ratio of 16/9.  You can also apply different aspect ratios for different screen sizes like this: ```html <gds-img aspect-ratio="l{16/9} m{4/3} s{1/1}"></gds-img> ```  The above example will apply the aspect ratio of 16/9 for large screens, 4/3 for medium screens, and 1/1 for small screens. |
| `'border-radius'` | `string \| undefined` | `-` | Controls the border-radius property of the image. Supports all the size tokens from the design system.  You can apply radius in each corner like this: ```html <gds-img border-radius="none none m m" ></gds-img> ```  Also for different breakpoints like this: ```html <gds-img border-radius="s{xs} m{xs} l{s}"></gds-img> ``` |
| `'object-fit'` | `string \| undefined` | `-` | Controls the object-fit property of the image.  You can apply fit like this: ```html <gds-img object-fit="cover"></gds-img> ```   The above example will apply the object-fit style of cover. |
| `'object-position'` | `string \| undefined` | `-` | Controls the `object-position` of the img. Supports all common CSS values. |
| `position` | `string \| undefined` | `-` | Style Expression Property that controls the `position` property. Supports all valid CSS `position` values. |
| `transform` | `string \| undefined` | `-` | Style Expression Property that controls the `transform` property. Supports all valid CSS `transform` values. |
| `inset` | `string \| undefined` | `-` | Style Expression Property that controls the `inset` property. Supports all valid CSS `inset` values. |
| `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. |
| `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. |
| `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. |
| `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
| `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
| `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
| `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values |
| `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. |
| `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. |
| `height` | `string \| undefined` | `-` | Style Expression Property that controls the `height` property. Supports space tokens and all valid CSS `height` values. |
| `'min-height'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-height` property. Supports space tokens and all valid CSS `min-height` values. |
| `'max-height'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-height` property. Supports space tokens and all valid CSS `max-height` values. |
| `'block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `block-size` property. Supports space tokens and all valid CSS `block-size` values. |
| `'min-block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-block-size` property. Supports space tokens and all valid CSS `min-block-size` values. |
| `'max-block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-block-size` property. Supports space tokens and all valid CSS `max-block-size` values. |
| `src` | `string \| undefined` | `-` | The URL of the image |
| `srcset` | `string \| undefined` | `-` | The srcset attribute for responsive images Format: "image.jpg 1x, image-2x.jpg 2x" or "image-320.jpg 320w, image-640.jpg 640w" |
| `sizes` | `string \| undefined` | `-` | The sizes attribute for responsive images Format: "(max-width: 320px) 280px, (max-width: 640px) 580px, 800px" |
| `alt` | `string \| undefined` | `-` | Alternative text description of the image Required for accessibility. Should be empty string if image is decorative. |
| `loading` | `'lazy' \| 'eager' \| undefined` | `-` | Loading strategy for the image |
| `decoding` | `'auto' \| 'sync' \| 'async' \| undefined` | `-` | Decoding strategy for the image |
