Question

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

就像它现在一样，它可以显示标题，但是当我们将浏览器调整到较小的断点时，如果标题太长则会突破（将显示标题但如果标题也是如此可能不是图像长）。

这就是我现在正在寻找的解决方案，我将留下一个jsfiddle作为例子，我试图让它变得最简单，所以不要看丑陋的箭头和东西：P。

对此的一个丑陋的解决方法是在这里改变填充底部：

.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

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

CSS绝对元素在画廊上，尊重16：9的比例

1 个答案: