Is there a way to maintain the same width for the image and div below?
Everything looks good until the window size is between 545px to 575px. The .header width changes only at col-md-12. How can I preserve the aspect ratio?
HTML
<div class="container">
<div class="row">
<div class="first-column col-md-4 col-sm-6 col-xs-12">
<img class="img-responsive" src="https://unsplash.it/500">
<div class="header">header</div>
</div>
<div class="second-column col-md-4 col-sm-6 col-xs-12">
<img class="img-responsive" src="https://unsplash.it/500">
<div class="header">header</div>
</div>
<div class="third-column col-md-4 col-sm-6 col-xs-12">
<img class="img-responsive" src="https://unsplash.it/500">
<div class="header">header</div>
</div>
<!--END ROW-->
</div>
<!--END CONTAINER-->
</div>
CSS
.first-column{background-color: #c0c0c0}
.second-column{background-color: #808080}
.third-column{background-color: #778899}
.header{
background-color:rgba(45,44,89,0.7);
width: 100%;
color: #ffffff;
position: relative;
bottom: 40px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}