jquery - 如何使用Bootstrap修复标题中的图像大小

我在应用程序标题中设置品牌形象时遇到麻烦。我尝试同时使用img-responsive类和自定义类.brand来设置高度和宽度，但是图像要么完全缩小，要么变得太大。

我是否还缺少其他div班或其他课程？

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="<%= request.getContextPath()%>/index.jsp">
                <img class="img-responsive" src="<%= request.getContextPath()%>/img/main-product-icon.png"/>
                Product Manager
            </a>
        </div>
    </div>
</nav>


<style>
    body {
        padding-top: 50px;
        padding-bottom: 20px;
    }

    .img-responsive {
        max-width: 50px;
        max-height: 20px;
    }

    .brand {
        height: 100px;
    }

</style>

最佳答案

您在max-height: 20px中设置img-responsive，而您正在尝试在height: 100px中设置brand。您可以将max-height中的img-responsive属性增加到大于或等于height中的brand属性的值。另外，同时包括img-responsive和brand类。我还建议删除max-width属性以保持尺寸一致。

变更摘要-

<a class="navbar-brand" href="<%= request.getContextPath()%>/index.jsp">
   <img class="img-responsive brand" src="<%= request.getContextPath()%>/img/main-product-icon.png"/>
   Product Manager
</a>

<style>
.img-responsive {
        //max-width: 50px;
        max-height: 100px;
    }

    .brand {
        height: 35px;
    }
</style>

Click here用于带有示例徽标的工作提琴。

编辑-Click here与图像和徽标并排摆弄。