2

这是我的第一个问题，我不认为我做错了什么，因为它很具体，我正在尝试做一个画廊，这个画廊有页面，每个页面都有一个标题，我需要展示一个比例为 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;
}

任何形式的帮助将不胜感激，如果问题是错误的，对不起。谢谢！

4

1 回答 1

3

这是你要找的吗？

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

我自己也有类似的问题：

使用 CSS 缩放对象元素高度与宽度成比例 + 常量

你不需要做任何特别的事情来让标题出现在图像之后。这是块元素的标准行为。

于 2013-03-07T21:41:42.620 回答