问画廊上的CSS绝对元素，考虑16:9的比例

EN

这是我的第一个问题，我不认为我做错了什么，因为它是具体的，我正在尝试做一个画廊，这个画廊有页面，每个页面都有一个标题，我需要显示一个16:9比例的图像和标题，无论它有多长。

现在，它可以显示标题，但当我们将浏览器调整到一个较小的断点时，如果标题太长，它就会断开(如果标题太长，将显示标题，但可能不显示图像)。

这就是我现在正在寻找的解决方案，我将留下一个jsfiddle作为示例，我试图使它尽可能简单，所以不要看丑陋的箭头和东西:P。

小提琴：http://jsfiddle.net/Vb7bP/5/

一个丑陋的修复方法是改变这里的填充底部：

.galleryContainer {
    padding-bottom: 56.25%; // This is for the image to respect a 16:9 aspect ratio.
}

但这不会起作用，因为如果标题太长或太短，它可能会崩溃，我们可能会失去16:9的比例。

我认为标题css很好，它被放置在div的底部作为绝对标题。

.galleryCaptionWrapper {
    background: #ccc;
    width: 100%;
    position: absolute;
    padding: 25px;
    z-index: 3;
    bottom: 0;
}

任何形式的帮助都将非常感谢，如果问题是错的，很抱歉。谢谢!