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来查看它。

我的解决方案是使用弹性框

<%
String lookupUrl = "java:comp/env/MyBeanName";
Context ctx = new javax.naming.InitialContext();
MyBeanNameLocal ejbLocal = (MyBeanNameLocal) ctx.lookup(lookupUrl);

String output = ejbLocal.myBusinessMethod();
%>

小提琴：https://jsfiddle.net/hfzvqhka/

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

1 个答案: