이 그리드 레이아웃을 항상 같은 크기의 부트 스트랩 3으로 유지하려면 어떻게해야합니까?

내부에 이미지가있는 그리드 레이아웃을 만들려고합니다. 이미지가 항상 같은 크기는 아닙니다. 일부는 그리드의 레이아웃을 약간 더 작게 만드는 것 같고 모든 이미지를 얻을 수있는 방법을 찾을 수 없습니다. 같은 사이즈.

다음은 HTML입니다.

<div class="col-xs-12">
  <div class="row">
  <h2>Handheld Consoles</h2>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
    <a href="#">
      <div class="tile purple text-center">
        <h3 class="title">Nintendo 3DS</h3>
        <div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/3ds.png" /></div>
      </div>
    </a>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
    <a href="#">
      <div class="tile red text-center">
        <h3 class="title">Nintendo GBA</h3>
        <div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/gba.png" /></div>
      </div>
    </a>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
    <a href="#">
      <div class="tile orange text-center">
        <h3 class="title">Nintendo 64</h3>
        <div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/n64.png" /></div>
      </div>
    </a>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
    <a href="#">
      <div class="tile green text-center">
        <h3 class="title">Sony PSP</h3>
        <div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/psp.png" /></div>
      </div>
    </a>
    </div>
  </div>
</div>

그리고 CSS.

.tile {  
    width:100%;
    display: inline-block;
    box-sizing: border-box;
    background: #fff;       
    padding: 15px;
    margin-bottom: 20px;
    color:#fff;
} 
.title {
    margin-top: 0px;
    text-align:center;
}
.purple {
    background: #5133AB;
}
.purple:hover {
    background: #3e2784;
}