Article Image Width: CSS Edit

One of the issues with image display in an article was that depending on the width of the original image it would extend outside the boundaries of the article itself. This was especially evident when viewing the article on a mobile.

Well there is an easy fix.

Down the bottom of your Global.css add the following:



 

I'd recommend a slight change:


max-width on images can be pretty hairy, as all the following "overly wide image" situations can occur:

1. Image with width set but not height – your code would have worked, height would auto-adjust, best to not apply the rule in this case as a specific size was likely intended
2. Image with neither height nor width set – your code would have worked, height would auto-adjust
3. Image with height set but not width – the image would have got distorted, best to not apply the rule in this case (hence the nots)
4. Image with both width and height set – the image would have got distorted, best to not apply the rule in this case as a specific size was likely intended.

I don't think the "height: auto" is needed but I like to include it for completeness/being-explicit.

If you want to force override of any width/height specified (i.e. a different handling of situation 1/3/4):
In this case the "height: auto" is definitely needed.


Hope that helps. This is something I've only recently got fully on top of myself, hence some changes in the default theme about it across the patch releases.

Understood.

Cheers for the breakdown Chris.

Very Help, thanks for the threads