如何防止div在col-md-12上溢出？ （bootstrap 3）

Question

想要将图片和div保持在相同的宽度。

工作正常，直到我达到545px到575px的窗口大小。 .header仅在col-md-12处更改宽度比例。有没有办法保持相同的宽高比？

SCREENSHOT

CODEPEN

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

Answer 1

bootstrap .img-responsive类有一个max-width:100%;但它没有设置宽度。
所以给班级增加一个宽度。

.img-responsive {
  width: 100%;
}

https://codepen.io/rickydam/pen/XarXYX