容器中的几个图像可以缩小以适合容器的最大高度吗？

Question

我希望容器中的每个图像都缩小，以使所有图像合在一起不超过容器的最大高度。

我是运行Xenforo的论坛中的管理员（但不是sadmin，所以我仅限于模板访问）。

我们一直在通过限制超过给定高度（490px）的所有内容并隐藏溢出来限制签名大小。我们还将签名中的图像调整为最大值，使其接近最大签名值（400像素），从而为文本等留出一些小的垂直空间。

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

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

“签名”是容器，“ bbCodeImage”是我要缩小的元素。

https://codepen.io/anon/pen/rgLKKJ

codepen链接显示当前行为。

这对于单个图像来说效果很好，但是一旦有一个以上，或者即使在同一容器中但在图像本身之前存在文本内容，它就会消除多余的内容（或超出max- （如果我们不隐藏溢出内容，则限制高度），而不是进一步缩小图像以适合容器中的所有内容。

在上述Codepen示例中，我希望所有三张图片总共垂直显示在490px以内。当然，我可以将.bbcodeImage max-height设置为一个可以容纳490px的尺寸的三倍，但是这个想法是CSS应该根据需要缩小很多图像以容纳490px的尺寸。

仅CSS就能做到吗？