响应式布局，如何将文本保留在动态调整图像大小的底部

Question

我正在尝试在图像上覆盖一些文本。如果图像位置和大小保持不变，这很容易，但在这里我允许图像根据屏幕大小动态调整大小。

http://jsfiddle.net/xcs9L7u6/1/

当我将文本位置设置为绝对时，文本框的大小正确，我可以将其放置在图像的底部就好，但是当图像底部由于窗口大小而不断变化时，这不起作用。

所以..

1. 如何将文本保留在调整图像高度的底部？
2. 将文本框保持为图像调整大小宽度的宽度？

HTML：

<div>
    <div class="gallery-background">
        <div class="gallery-text">Setting up some text to look at boats and fill space so that things move and wrap but need more text as it didn't quite give the right feel</div>
        <img src="http://static.giantbomb.com/uploads/original/0/4530/396796-boat.jpg" class="galleryLrg" />
    </div>
</div>

CSS：

.gallery-background {
    margin: 1.5rem 1rem 1rem 1rem;
    /*needed for firefox and ie*/
    height: 100%;
}

.gallery-text {
    color: white;
    padding: .5rem;
    max-width: 100%;
    display: inline-block;
    text-align: left;
    background-color: rgba(0, 255, 0, .65);
    position: absolute;
}

.galleryLrg {
    display: inline-block;
    height: 90%;
    width: 100%;
}

任何想法都会很棒，谢谢。

Answer 1

您所要做的就是设置.gallery-background为position: relative、gallery-text和position: absolute。从那时起，维护.gallery-text在图像的底部只需将bottom,left和rightCSS 属性设置为0。

在这里摆弄

需更改的代码：

.gallery-background {
    position: relative;
}

.gallery-text {
    position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
}