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:
