Article Image Width: CSS Edit
Standard member
Well there is an easy fix.
Down the bottom of your Global.css add the following:
Code
[itemprop="articleBody"] img {
max-width: 100%
}
Last edit: by Paul Flavel
Site director
Code (CSS)
[itemprop="articleBody"] img:not([width]):not([height]) {
max-width: 100%;
height: auto;
}
max-width: 100%;
height: auto;
}
max-width on images can be pretty hairy, as all the following "overly wide image" situations can occur:
- 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
- Image with neither height nor width set – your code would have worked, height would auto-adjust
- 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)
- 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):
Code (CSS)
[itemprop="articleBody"] img {
max-width: 100%;
height: auto;
}
max-width: 100%;
height: auto;
}
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.
Last edit: by Chris Graham
Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
- If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
- If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
- If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Standard member
Cheers for the breakdown Chris.
Standard member
1 guest and 0 members have just viewed this.
