CODEWITHSUNDEEP
htmlimagetwitter-bootstrapcssresponsive
Asem H
Asem H

Reputation: 93

How do I maintain image size based on browser width

So I'm having an issue with bootstraps dynamic pills. Here's what the tabs look like before the browsers width is shortened:

enter image description here

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

enter image description here

The code associated with this is:

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

The css for the following html is:

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

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

Is there anything I can do to fix this issue?

Thanks in advance

Upvotes: 0

Views: 40

Answers (1)

Shannon Duncan
Shannon Duncan

Reputation: 178

You can either make the tabs forced to the height of the tallest tab using javascript, or you can use flexbox.

I made a simple jsfiddle for you to view it with.

My solution is using flex box

.nav-tabs{
    display: flex;
}
.nav-tabs li {
    display: flex;
    flex: 1;
}

.nav-tabs li  a {
    flex: 1;
}

Fiddle: https://jsfiddle.net/hfzvqhka/

Upvotes: 1

Related Questions