Small column images don't get scaled up to 100% width on mobile

[gopeter]

At first, thanks for this awesome tool!

I've found a little bug (or feature request?) that I wanted to report: If you insert images in a 4-column-layout, the images doesn't get scaled up on mobile devices because the width of the wrapping column is set. You can reproduce this easily inside the live editor:

That's how it should look even if there are 4 columns:

This is how it looks in a 4-column layout:

Is there any possibility to make this images scale up to 100% too?

Thanks and best regards! :)

[gopeter]

OK, I think I got it: the surrounding table needs a width of 100% too. I'll try it out in an own component and will push a MR if it works across all devices

[mikwraae]

Did you find a solution to this problem?

[iRyusa]

I tried to fix it, but not so much success with it

[mikwraae]

Damn.. What about a work-around?

[blaugueux]

+1 I have the same issue.

[iRyusa]

Ok so, here are the use case on MJ-Image that I have in mind :

• Fixed width in dekstop, 100% in mobile
• Fixed width in desktop, fixed width in mobile
• 100% of column in desktop, fixed width in mobile ( useless ? )
• 100% of column in desktop, 100% in mobile

As of today we cover only fixed width in both desktop/mobile. Problem is we should remain backward compatible with current template and it will be hard to keep all 4 behaviour inside a single component.

[blaugueux]

We could use a specific parameter to manage both case FluidOnMobile?

[Rick8rooke]

Im having this problem with 2 mj-column inside a section. The surrounding table is not set to 100% width so the images do not scale up. Is there a fix for this yet?

<mj-section>
    <mj-column>
       <mj-image src="pic.jpg" />
    </mj-column>
    <mj-column>
       <mj-image src="pic.jpg" />
    </mj-column>
</mj-section>

[iRyusa]

Hi @Rick8rooke

As the issue is still opened : there's no fix for this atm. We're trying to working on this for MJML4 but no ETA yet.

[iRyusa]

Well, playing with max-width looks to be "the" solution here. Main issue is Outlook 2003 and older will totally fail at rendering larger image.

Anyone has an idea how to keep the Outlook 2000/2001/2003 for mj-image with max-width ?

[Krulzor]

So the max-with it's working as workaround for this?
Do you set img with width 100% and max-width 600?

Thank you!

[iRyusa]

Main issue is Outlook 2003 and older will totally fail at rendering larger image.

As mentioned here, they will overflow if larger than the column

[ghost]

Hello @iRyusa do you plan back to this issue? Outlook has only ~4% of the world market. Outlook 2003 and olders are only part of this.

Outlook also have got problems with a lot of things like for example: GIFs, which is used often in emails. If outlook clients want have correctly email view, they always can use link "show in browser".

[danterohlin]

Is there any news on this?
My way is simply to add a css-class "full-w" to the mj-image element that has "full-w > table" as selector.
Example:

[iRyusa]

Check fluid-on-mobile attribute. It already does that for you.

[renchris]

Is there an attribute like fluid-on-mobile but for mobile and desktop (just full width regardless of it being at the mobile or desktop breakpoint)?