如何使用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>

您在img-responsive中设置了max-height: 20px，并试图在brand中设置height: 100px。可以将img-responsive中的max-height属性增加到大于或等于brand中的height属性的值。此外，还包括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>

点击此处查看带有示例徽标的工作小提琴。

编辑-点击此处查看并排的图像和徽标。

如果你想固定图像的大小，你应该给图像宽度和高度。因为img响应总是占用100%的宽度。

试试这个：

.brand {
        height: 100px !important;
    }

您可以尝试以下代码。它有效。

 <style>
body {
    padding-top: 20px;
    padding-bottom: 10px;
}
.img-responsive {
    max-width: 20px;  
    max-height: 20px; 
}
.abc 
{
    width:20px;
    height: 20px;
}
.xyz
{
     margin-top:0px;
     padding-top:5px;
}

<!DOCTYPE html />
<script src="../../Scripts/bootstrap-3.3.6-dist/js/bootstrap.js" type="text/javascript"></script>
<link href="../../Scripts/bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
        <div class = "adjust">
            <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 xyz">
               <img class = "img-responsive abc" src="../../Images/chicago-school-college-exterior-renovation-photography.jpg" />
                Product Manager
            </a>
        </div></div>
    </div>
</nav>

相关内容

最新更新

热门标签：