Search code examples
imageemailmjml

MJML mj-image fill height of container

I'm building an email template with MJML

This is the requested layout.

Requested layout

This is what I have now.

Actual layout

I need the image to fill the height of the container so that it has the same height as the other column with the text.

This is the code I'm working with.

<mj-section padding="0" background-color="#856555" direction="rtl">
<mj-column>
    <mj-image
        src="https://example.com/image.jpg"
        padding="0"
        fluid-on-mobile="true"
    />
</mj-column>
<mj-column padding="20px">
    <mj-raw>
        <span style="color: #fff; opacity: .5; float: left; margin-right: 16px">OUR</span>
        <span style="color: #fff; opacity: .5; float: right;">ATHLETES</span>
    </mj-raw>

    <mj-text color="#fff" padding="40px 0 32px" font-size="36px" line-height="1.3"> 101 <br> LOREM IPSUM </mj-text>
    <mj-text color="#fff" padding="0 0 16px" font-size="14px" line-height="1.4">
        Lorem ipsum dolor[...]
    </mj-text>
    <mj-button mj-class="btn-white" align="left"> SCOPRI </mj-button>
</mj-column>

I'm using fluid-on-mobile="true" to fill the container in the mobile view of the email but I need it to fill the height as well in the desktop view. Does anyone have an idea of how I could accomplish this?

Solution

  • I don't think this is possible as images sadly don't get the same properties they can on web, like object-fit: cover; (which would be great). Percentage based size is also out of the question.

    You have 2 solutions, both with downsides:

    enter image description here

    1. Set a fixed height for the image If you know the amount of content you'll have on the side, you can take this route. Yes, it stretches the images and deforms it, but gets the job done. If the stretching is not too much, maybe it can go unnoticed. The image only gets the fixed height treatment on desktop. On mobile, it keeps the "auto" sizing.

    https://mjml.io/try-it-live/DJcPAc-sH

    enter image description here

    2. Center-align the content

    Not as great in my opinion, as it diverts too much from the design and breaks the layout, but it keeps the content aligned and is probably ideal if you have no control over the content (or its length) on the left.

    https://mjml.io/try-it-live/Pwi5wopxy