Bootstrap and text on responsive image

Question

I am trying to accomplish something like this:

As I am using Bootstrap, for now I have this:

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

This works well for big and medium screens but the problem is on smaller screens. After all elements stack to one column the problem appears with smaller images. On bigger screens where there are multiple elements in one row there is no problem, text appears on the bottom of the image. The problem is that some images are not big enough on smaller screens as they need to have width 100% of the screen and they are only 300-400ox wide. Because of that they don't use 100% of the screen, but header does use it .

It looks something like this:

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

So, header spreads all the way to the left and right of the screen and jumps outside of the image. How to keep header inside of the image no matter of screen size?

Thank you!

Answer 1

Try this:

Demo : 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>

Check the demo for different sizes of image.

Answer 2

DEMO: http://jsbin.com/nobape

There are two options. The first is the answer, but it's not the best idea. When the viewport gets very small, the caption text can cover up a good portion of the image. When you look at the demo, the second row only does the caption over the image at the 500px min-width and under that, it stacks, which looks very nice and easy to read.

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>