### mj-image

Displays a responsive image in your email. It is similar to the HTML `<img />` tag.

Note that if no width is provided, the image will use the parent column width.

```xml
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="300px" src="https://static.mailjet.com/mjml-website/documentation/image.png" />
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
```

#### Attributes

| attribute                  | accepts                 | description                                                                     | default value         |
| -------------------------- | ----------------------- | ------------------------------------------------------------------------------- | --------------------- |
| align                      | `left` `center` `right` | image alignment                                                                 | `center`              |
| alt                        | string                  | image description                                                               | `''`                  |
| border                     | string                  | CSS border format                                                               | `0`                   |
| border-bottom              | string                  | CSS border format                                                               |                       |
| border-left                | string                  | CSS border format                                                               |                       |
| border-radius              | string                  | border radius                                                                   |                       |
| border-right               | string                  | CSS border format                                                               |                       |
| border-top                 | string                  | CSS border format                                                               |                       |
| container-background-color | CSS color formats       | inner element background color                                                  |                       |
| css-class                  | string                  | class name, added to the root HTML element created                              |                       |
| fluid-on-mobile            | boolean                 | if `true`, will be full width on mobile even if `width` is set                  |                       |
| font-size                  | `px`                    | size of the alt text when image is not rendered                                 | `13px`                |
| height                     | `px`                    | image height                                                                    | `auto`                |
| href                       | string                  | link to redirect to on click, in URL format                                     |                       |
| max-height                 | `px` `%`                | specify the maximum height of an image                                          |                       |
| name                       | string                  | specify the link name attribute                                                 |                       |
| padding                    | `px` `%`                | hero padding, supports up to 4 parameters                                       | `10px 25px`           |
| padding-bottom             | `px` `%`                | hero bottom padding                                                             |                       |
| padding-left               | `px` `%`                | hero left padding                                                               |                       |
| padding-right              | `px` `%`                | hero right padding                                                              |                       |
| padding-top                | `px` `%`                | hero top padding                                                                |                       |
| rel                        | string                  | specify the rel attribute                                                       |                       |
| sizes                      | string                  | set width based on query                                                        |                       |
| src                        | string                  | image source in URL format                                                      |                       |
| srcset                     | string                  | enables to set a different image source based on the viewport, using CSS syntax |                       |
| target                     | string                  | link target on click                                                            | `_blank`              |
| title                      | string                  | tooltip & accessibility                                                         |                       |
| usemap                     | string                  | reference to image map, be careful, it isn't supported everywhere               |                       |
| width                      | `px`                    | image width                                                                     | inherits parent width |

<p class="cta-container"><a class="cta" href="https://mjml.io/try-it-live/components/image">Try it live</a></p>