Text über Bild im Bootstrap Text div geht über Breite, wie die Breite der Box an Bild ausrichten?

Question

Es wird versucht, den Hintergrund von .header auf die gleiche Größe wie die Bildbreite auszurichten und so mit dem reagierenden Bild zu skalieren.

Hier ist es auf codepen: https://codepen.io/jggrs/pen/owKdvz?editors=1100

Was ich will, es so aussehen: http://imgur.com/a/yK7KP

HTML

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

CSS

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

Answer 1

Werfen Sie einen Blick auf diese: Relative absolute positioning

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

 
.header { 
 
    background-color: red; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 15px; 
 
    right: 15px; 
 
    float: bottom; 
 
} 
 

 
.col { 
 
    position: relative 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="first-column col 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 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 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>