画廊上的 CSS 绝对元素，尊重 16 :9 ratio

Question

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

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

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

fiddle :http://jsfiddle.net/Vb7bP/5/

对此的一个丑陋的解决方法是更改​​此处的 padding-bottom:

.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;
}

任何形式的帮助将不胜感激，如果问题有误，抱歉。谢谢!

Answer 1

这是您要找的吗？

http://jsfiddle.net/Vb7bP/3/

我认为你在很多你不需要的事情上有绝对的定位。相关的CSS在这里:

.galleryImageWrapper {
    background-color: #000;
    width: 100%;
    padding-bottom: 56%;
    position: relative;
}
.galleryImageWrapper img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
}

我自己也有类似的问题:

Scaling object element height proportional to width + constant with CSS

您无需执行任何特殊操作即可使标题出现在图像后面。这是 block 元素的标准行为。