Question

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

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

所以..

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

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和right CSS属性设置为0即可。

<强> Fiddle here

要更改的代码：

.gallery-background {
    position: relative;
}

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

Answer 2

只需将.gallery-text设置为bottom: 0，它就会始终位于底部：

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

并将position:relative添加到其父级以保持其中包含：

.gallery-background {
   margin: 1.5rem 1rem 1rem 1rem;
   /*needed for firefox and ie*/
   height: 100%;
   overflow: hidden; //add to hide excess 
   position: relative; //add to contain absolute element 
}

FIDDLE

Answer 3

JSFiddle

您应修改两点，添加这些属性。

.gallery-background {
    position:relative;
}
. gallery-text {    
    bottom:0;
}

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

3 个答案: