How do I maintain image size based on browser width
<p>So I'm having an issue with bootstraps dynamic pills. Here's what the tabs look like before the browsers width is shortened:</p>

<p><a href="https://i.stack.imgur.com/7fcBN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7fcBN.png" alt="enter image description here"></a></p>

<p>However, when I make the width of my browser shorter, the images become distorted like this (Images start shrinking in height and width differently):</p>

<p><a href="https://i.stack.imgur.com/onXNR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/onXNR.png" alt="enter image description here"></a></p>

<p>The code associated with this is:</p>

<pre><code>        &lt;ul class="nav nav-tabs nav-justified"&gt;

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

        &lt;li&gt;

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

        &lt;li&gt;

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

    &lt;/ul&gt;
</code></pre>

<p>The css for the following html is:</p>

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

.cssTabImage {
margin-bottom: -5px;
}
</code></pre>

<p>Is there anything I can do to fix this issue?</p>

<p>Thanks in advance</p>