I want every image in a container to shrink so all of them combined don't go over the max-height of the container.

I am an admin in a forum running Xenforo (but not sadmin, so I'm limited to template access).

We've been limiting signature size by cutting off anything over a given height (490px) and hiding the overflow. We also resize images in signatures to a maximum of a value approaching the max signature value (400px) leaving some small vertical real estate for text and whatnot.

.signature .bbCodeImage {
    max-height: 400px;
    max-width: 700px;
    height: auto;

.message .signature {
    max-height: 490px;
    max-width: 700px;
    margin: 0 auto;
    overflow: hidden;

"signature" is the container, "bbCodeImage" are the elements within I'm trying to shrink.


The codepen link shows the current behavior.

This works pretty well for a single image, but as soon as there's more than one, or even if there's text content inside the same container but prior to the image itself, then it cuts off excess (or goes out of max-height bounds if we don't hide the overflow) instead of just shrinking the image further to fit everything in the container.

In the above codepen example, I'd like all three pictures to display within 490px vertically, total. I could, of course, set .bbcodeImage max-height to a dimension that could fit inside 490px three times, but the idea is that the CSS should shrink however many images to fit inside 490px, as need be.

Can it be done with just CSS?

0 Answers