Html 引导文本div中图像上的文本超过了宽度，如何将框的宽度和图像对齐？

尝试将.header的背景对齐到与图像宽度相同的大小，因此它会随着图像的大小而缩放

在代码笔上：

我希望它看起来像什么：

HTML

看看这个：

。第一列{背景色：#C0}
.第二列{背景色：#8080}
.第三列{背景色：#778899}
.标题{
背景色：红色；
位置：绝对位置；
底部：0；
左：15px；
右：15px；
浮动：底部；
}
上校{
职位：相对
}

标题
标题
标题

收割台位置：绝对位置；我想是的，就像里尼克说的那样，把绝对位置从头球上移开，你们会很高兴的，谢谢你们！！成功了…天啊，我在这上面花了太多时间了

   <div class="container">
   <div class="row">

   <div class="first-column col-md-4 col-sm-6 col-xs-12">
   <div class="header">header</div>
   <img class="img-responsive" src="https://unsplash.it/500">
   </div>

   <div class="second-column col-md-4 col-sm-6 col-xs-12">
   <div class="header">header</div>
   <img class="img-responsive" src="https://unsplash.it/500">
   </div>

   <div class="third-column col-md-4 col-sm-6 col-xs-12">
   <div class="header">header</div>
   <img class="img-responsive" src="https://unsplash.it/500">
   </div>

   </div> 
   </div>

    .first-column{background-color: #c0c0c0}
    .second-column{background-color: #808080}
    .third-column{background-color: #778899}

    .header{
    position: absolute;
    bottom: 0px;
    background-color: red;
    width: 100%;
    color: #ffffff;
    }