css - 画廊上的CSS绝对元素，尊重16:9的比例

这是我的第一个问题，我想我没有做错什么，因为它很具体，我正在尝试创建一个画廊，这个画廊有页面，每个页面都有标题，我需要显示一个比例为16：9的图像和标题，无论时间长短。

目前，它可以显示标题，但是当我们将浏览器的大小调整为较小的断点时，如果标题太长，它将中断（显示标题，但如果标题太长，则可能不会显示图像）。

那就是我现在正在寻找的解决方案，我将以jsfiddle为例，我试图使其尽可能简单，所以不要看难看的箭头和东西：P。

小提琴：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;
}

任何帮助将不胜感激，如果问题是对的，抱歉。谢谢！

最佳答案

这是您要找的东西吗？

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

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

关于css - 画廊上的CSS绝对元素，尊重16:9的比例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15278438/