html - 如何根据浏览器宽度保持图像大小

Question

所以我在使用 bootstraps 动态药丸时遇到了问题。以下是浏览器宽度缩短前选项卡的样子:

但是，当我缩短浏览器的宽度时，图像会像这样扭曲(图像开始以不同方式缩小高度和宽度):

与此相关的代码是:

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

我能做些什么来解决这个问题吗？

提前致谢

Answer 1

您可以使用 javascript 将选项卡强制设置为最高选项卡的高度，也可以使用 flexbox。

我制作了一个简单的 jsfiddle 供您查看。

我的解决方案是使用 flex box

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

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

fiddle :https://jsfiddle.net/hfzvqhka/