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

时间:2016-12-07 16:39:44

标签: html5 image twitter-bootstrap css3 responsive

所以我遇到了bootstraps动态药丸的问题。以下是缩短浏览器宽度之前选项卡的外观:

enter image description here

然而,当我缩短浏览器的宽度时,图像会像这样扭曲(图像的高度和宽度开始缩小):

enter image description here

与此相关的代码是:

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

我有什么办法可以解决这个问题吗?

提前致谢

1 个答案:

答案 0 :(得分: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/