I have the full explanation for this!
Let me try to explain… Here’s a screen capture of your page, when I disable the rule that forces the image to be 100% wide:
As you can see on the onset square on top-right, I am disabling the
width: 100% !important rule for images inside figures (
figure img selector).
What we can see is that immediately the image takes its original size (300×244) and everyone’s happy
On the other hand, when we don’t disable this rule and we tell it to be 100% wide, it extends just to the size I marked as 100% in green. So, not all the available space actually, right?
Why is this 100% not forcing the image to actually take all the width of the FAQ item it belongs to? Well, the answer is, the image takes 100% of the width of its immediate parent.
Let’s take a look at the markup for this figure, the image, and the caption:
<figure role="group" class="align-left">
<img alt="figure" data-entity-type="file" data-entity-uuid="ded787cf-3d7d-4de7-b1d7-8d705d09af30" src="/sites/test-voisins2.web.cern.ch/files/inline-images/radiation_levels_0_0_0.jpg">
<em>The typical annual dose from natural sources measured at several places near to and far from CERN sites.</em>
Is it clearer now? Exactly! The
figure tag is the immediate parent of the
img tag, and it grows wide enough to accommodate for the
figcaption element. See how suspiciously the 100% mark on the image coincides exactly with the end of the caption text?
I wouldn’t say this is completely buggy behaviour since the intention is that images always take the maximum space possible without going outside of their container. But I would just remove the
width: 100% !important rule from the CERN theme since it causes more harm than good. I might send a patch if I have time.
!important is pretty nasty because it makes it super difficult to patch these things in a CERN Override theme.
For your use case I think your best bet is to make images wider than the caption to make sure you get the image’s width (
figure will grow because of the image, not because of
figcaption). If your actual image needs to be smaller, you can always edit the image to add a white or transparent padding.
Hope this explanation helps understanding a little bit better CSS and its quircks!