FIGURE image-sizing CSS bug

There’s a bug in the site CSS for the <figure> tag, when used with portrait-aspect images (like the last one in @dumbmusclehypnojockb 's story Getting SQUIP’d: Depending on the window width, font size, etc., the caption can sometimes overlap with the flowed body text:


If you give the <figure> itself an 8-pixel red border, it becomes really obvious why:

figure { border: 8px solid red; }


…The caption, and sometimes even part of the image itself, sticks out past the bottom of the <figure> container completely.

Turns out, this is an ugly thing that just happens when max-height is set on figure elements, at least in Google Chrome.

Fortunately, the fix is just as easy: Move the max-height styling to the image inside the figure, only, and don’t set ANY height or max-height for the figure ­— let it just scale to enclose its contents.

figure {
  height: unset;
  max-height: unset;
figure img {
  max-height: calc(min(50vw,500px));

(Or knock off a few pixels to compensate for the caption, if you prefer.)

Everything sizes itself the way it’s supposed to, for any combination of window width, image height, or image aspect ratio:


Thanks! I guess this bug was introduced with one of my recent changes that were meant to improve the layout and sizing of images within the story text. I just neglected to test images which have captions…

Also thank you for your in-depth insights into how to fix that :slight_smile:

(Can I consult you when I’m once again fighting with some strange CSS effects?! :slight_smile: )

1 Like

I’ve fixed the bug. Thanks again for reporting!

1 Like

Sure, I’m game. I can’t promise I’ll be able to help, but I’ve got bookmarked and I can read real fast. :wink:

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.