响应式图像上的Bootstrap和文本

Question

我想要完成这样的事情：

当我使用Bootstrap时，我现在有这个：

<div class="col-md-3">
        <div class="test">
            <%= (image_tag("http://example.com.image.jpg", :class => "img-responsive")) %>
            <h2>hello</h2>
        </div>
    </div>
</div>

CSS：

.test { 
   position: relative;

   h2 {
   background-color: #bebebe;
   position: absolute;
   bottom: 0px; 
   left: 0px; 
   width: 100%;
  }
}

这适用于大屏幕和中等屏幕，但问题出在较小的屏幕上。 在所有元素堆叠到一列后，问题会出现较小的图像。 在较大的屏幕上，一行中有多个元素没有问题，文本显示在图像的底部。 问题是一些图像在较小的屏幕上不够大，因为它们需要宽度为100％的屏幕而且它们只有300-400ox宽。 因为他们不使用100％的屏幕，但标头确实使用它 。

它看起来像这样：

     **********************************
     *                                *
     *                                *
     *            Image               *
     *                                *
     *                                *
********************************************
*                Header                    *
********************************************

因此，标题一直传播到屏幕的左侧和右侧，并跳转到图像之外。 无论屏幕尺寸如何，如何将标题保留在图像内？

谢谢！

Answer 1

尝试这个：

演示： http ： //jsfiddle.net/lotusgodkk/bm3mjhm1/

CSS：

.test {
    position: relative;
    display:inline-block; //Add display:inline-block; if it doesn't affect your code.
}
img {
    max-width:100%;
}
h2 {
    background-color: #bebebe;
    position: absolute;
    bottom: 0;
    left: 0;
    right:0; // Remove width:100% and add left,right offset.
}

HTML：

<div class="test">
    <img src="http://lorempixel.com/400/200/sports/1/" />
     <h2>Sample TExt. Sample TExt</h2>
</div>

检查演示，了解不同尺寸的图像。

Answer 2

演示： http ： //jsbin.com/nobape

有两种选择。 第一个是答案，但这不是最好的主意。 当视口变得非常小时，标题文本可以掩盖图像的大部分。 当您查看演示时，第二行仅在500px最小宽度处对图像执行标题，并且在其下方，它堆叠，看起来非常好并且易​​于阅读。

CSS

.img-full-width {
    width: 100%;
    height: auto;
}
.caption {
    position: relative;
    margin-bottom: 2%;
}
.caption h3 {
    margin: 0;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: rgba(41,82,123,.8);
    font-size: 15px;
}


.caption-2 {
    position: relative;
    margin-bottom: 2%;
}
.caption-2 h3 {
    margin: -1px 0 0 0;
    color: #fff;
    padding: 10px;
    background: rgba(41,82,123,1);
    font-size: 15px;
}
@media (min-width:500px) { 
    .caption-2 h3 {
        margin:0;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(41,82,123,.8);
    }
}

HTML

 <div class="container">
  <div class="row">
     <div class="col-sm-4">
        <div class="caption">
           <img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
           <h3>My Caption Goes Here</h3>
        </div>
     </div>
     <div class="col-sm-4">
        <div class="caption">
           <img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
           <h3>My Caption Goes Here</h3>
        </div>
     </div>
     <div class="col-sm-4">
        <div class="caption">
           <img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
           <h3>My Caption Goes Here</h3>
        </div>
     </div>
  </div>

  <hr>

  <div class="row">
     <div class="col-sm-4">
        <div class="caption-2">
           <img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
           <h3>My Caption Goes Here</h3>
        </div>
     </div>
     <div class="col-sm-4">
        <div class="caption-2">
           <img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
           <h3>My Caption Goes Here</h3>
        </div>
     </div>
     <div class="col-sm-4">
        <div class="caption-2">
           <img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
           <h3>My Caption Goes Here</h3>
        </div>
     </div>
  </div>