ブラウザの幅に基づいてイメージサイズを維持するには

Question

私はブートストラップダイナミックピルに問題があります。私は、ブラウザの幅を作るとき

しかし

は、短く、画像が（イメージが違った高さと幅が縮小し始める）このように歪む：ここでは、ブラウザが短縮される幅の前にタブがどのように見えるかです：

これに関連付けられたコードは次のとおり

 <ul class="nav nav-tabs nav-justified"> 

     <li class="active"> 
      <a class="cssTab" data-toggle="tab" href="#menu1"> 
       <center><img class="cssTabImage img-responsive" src="images/group-rates.png"></center> 
       <br> 
       Group Rates 
      </a>  
     </li> 

     <li> 

      <a class="cssTab" data-toggle="tab" href="#menu2"> 
       <center><img class="cssTabImage img-responsive" src="images/payment-info.png"></center> 
       <br> 
       Payment Info 
      </a> 
     </li> 

     <li> 

      <a class="cssTab" data-toggle="tab" href="#menu3"> 
       <center><img class="cssTabImage img-responsive" src="images/insurance-info.png"></center> 
       <br> 
       Insurance Info 
      </a> 
     </li> 

    </ul> 

次のHTMLのCSSは：

a.cssTab { 
font-size: 18px; 
color: #9f9f9f; 
font-weight: 200; 
} 

.cssTabImage { 
margin-bottom: -5px; 
} 

この問題を解決するための方法はありますか？ JavaScriptを使用して最も高いタブの高さに強制的にタブを作ることができるか、あなたはフレキシボックスを使用することができ、事前

Answer 1

で

感謝。

私はあなたにそれを見るための簡単なjsfiddleを作った。私はあなたがこの内部タブをやっているのに気づいhttps://jsfiddle.net/hfzvqhka/