4.15.15 • Published 12 months ago
netkin-mjml-image v4.15.15
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.
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-image width="300px" src="https://www.online-image-editor.com//styles/2014/images/example_image.png" />
</mj-column>
</mj-section>
</mj-body>
</mjml>| attribute | unit | description | default value |
|---|---|---|---|
| align | position | image alignment | center |
| alt | string | image description | '' |
| border | string | css border definition | none |
| border-top | string | css border definition | none |
| border-bottom | string | css border definition | none |
| border-left | string | css border definition | none |
| border-right | string | css border definition | none |
| border-radius | px | border radius | n/a |
| container-background-color | color | inner element background color | n/a |
| css-class | string | class name, added to the root HTML element created | n/a |
| fluid-on-mobile | string | if "true", will be full width on mobile even if width is set | n/a |
| height | px | image height | auto |
| href | url | link to redirect to on click | n/a |
| name | string | specify the link name attribute | n/a |
| padding | px | supports up to 4 parameters | 10px 25px |
| padding-bottom | px | bottom offset | n/a |
| padding-left | px | left offset | n/a |
| padding-right | px | right offset | n/a |
| padding-top | px | top offset | n/a |
| rel | string | specify the rel attribute | n/a |
| sizes | media query & width | set width based on query | n/a |
| src | url | image source | n/a |
| srcset | url & width | enables to set a different image source based on the viewport | n/a |
| target | string | link target on click | _blank |
| title | string | tooltip & accessibility | n/a |
| usemap | string | reference to image map, be careful, it isn't supported everywhere | n/a |
| width | px | image width | parent width |