Quick solution to max-width not working on #Firefox #CSS

Published in Joomla

Quick solution when max-width isn't filling the element in Firefox.

A recent update on firefox change the way it handled max-width in css and meant that in some case the image no longer fills the element in which it resides (in my case a Joomla module).

Now I’m not an expert in CSS (far from it) but I wanted to share my simple solution for fixing max-width when used inline in html:


What I had was:

<img style="max-width: 100%; " src=“path/myimage.jpg" />

To fix the max-width not working in Firefox, I changed it to:

<img style="max-width: 100%; width: 100%; " src=“path/myimage.jpg" />

Do not ask me why. It makes no sense to me. I’m pretty sure the reason why the max-width broke is somehow to do with the putting it in an element with no width setting, but I’m a CSS noob. I put this here simply to help anyone fix this problem, I welcome anyone who wants to comment on better CSS and perhaps shed light on why this happens in the first place.

Meanwhile I hope this solution allows you to fill the element with your image using max-width CSS, it works for me.