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 | n/a border | 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 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 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 | 100%