Article Image Width: CSS Edit

Post

Posted
Rating:
Item has a rating of 5 (Liked by Chris GrahamLiked by KingBastLiked by Sreekumar)
#2712 (In Topic #490)
Avatar
Standard member
Paul Flavel is in the usergroup ‘Honoured member’
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:

Code

 [itemprop="articleBody"]img {
   max-width: 100%
}


 

Last edit: by Paul Flavel

Online now: No Back to the top

Post

Posted
Rating:
Item has a rating of 5 (Liked by Paul FlavelLiked by KingBastLiked by Sreekumar)
#2715
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
I'd recommend a slight change:

Code (CSS)

[itemprop="articleBody"] img:not([width]):not([height]) {
   max-width: 100%;
   height: auto;
}
 

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):

Code (CSS)

[itemprop="articleBody"] img {
   max-width: 100%;
   height: auto;
}
 
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.

Last edit: by Chris Graham



Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Support me on Patreon

Was I helpful?
  • 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.
Online now: No Back to the top

Post

Posted
Rating:
#2720
Avatar
Standard member
Paul Flavel is in the usergroup ‘Honoured member’
Understood.

Cheers for the breakdown Chris.
Online now: No Back to the top

Post

Posted
Rating:
#2728
Avatar
Standard member
Sreekumar is in the usergroup ‘Fan in training’
Very Help, thanks for the threads
Online now: No Back to the top
1 guest and 0 members have just viewed this.
Control functions:

Contract Quick reply

Statistics

Users online:

John Connor, ManojSree, MVLipwig, Manu, Robbie Goacher (2), J.Thomas, Nimitz, Salman, 104 guests

Forum statistics:
  • 607 topics, 3,204 posts, 5,018 members
  • Our newest member is JoshuaHton
Birthdays:
Back to Top