导航栏品牌图片不适合导航栏高度

问题描述：

我正在尝试向我的网站添加导航栏品牌图片。该徽标似乎不适合导航栏。它要么太大或太小（当我设置height:100%）导航栏品牌图片不适合导航栏高度

这是我的导航栏HTML：

<nav class="navbar navbar-default navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false"> 
         <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=""> 
         <img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions"> 
        </a> 
       </div> 
       <div class="collapse navbar-collapse navbar-right" id="collapse"> 
        <ul class="nav navbar-nav"> 
         <li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a> 
          <div class="nav-line"></div> 
         </li> 
         <li class="dropdown" id="nav-about"> 
          <a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About 
          </a> 
          <ul class="dropdown-menu"> 
           <li><a href="about.html">The Founder</a></li> 
           <li role="separator" class="divider"></li> 
           <li><a href="health-policy.html">HSE Policy</a></li> 
           <li><a href="quality-policy.html">Quality Policy</a></li> 
          </ul> 
          <div class="nav-line"></div> 
         </li> 
         <li><a class="main" href="#services">Services</a> 
          <div class="nav-line"></div> 
         </li> 
         <li><a class="main" href="#projects">Our Projects</a> 
          <div class="nav-line"></div> 
         </li> 
         <li><a class="main" href="#whyus">Why Us</a> 
          <div class="nav-line"></div> 
         </li> 
         <li><a class="main" href="#contact">Contact</a> 
          <div class="nav-line"></div> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </nav>

我的导航栏CSS：

.navbar { 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); 
} 

.navbar-default .navbar-nav { 
    font-size: 15px; 
} 

.navbar-fixed-top { 
    min-height: 80px; 
} 

.navbar-nav>li { 
    position: relative; 
} 

.navbar-nav>li>a { 
    padding-top: 0px; 
    padding-bottom: 0px; 
    line-height: 80px; 
} 

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
    color: #fff; 
    background-color: #b4a28f; 
} 

.navbar-default .navbar-nav .dropdown-menu { 
    left: 0; 
    right: auto; 
} 

.dropdown-menu>.active>a, 
.dropdown-menu>.active>a:hover, 
.dropdown-menu>.active>a:focus { 
    color: #ffffff; 
    text-decoration: none; 
    outline: 0; 
    background-color: #b4a28f; 
} 

@media (min-width: 768px) { 
    .navbar-nav>li>.nav-line { 
     position: absolute; 
     bottom: -1px; 
     left: 0; 
     background-color: #3178b9; 
     height: 3px; 
     width: 0%; 
    } 
    .navbar-nav>li:hover>.nav-line { 
     background-color: #3178b9; 
     height: 3px; 
     width: 100%; 
     -webkit-transition: all 200ms ease-in; 
     -moz-transition: all 200ms ease-in; 
     -o-transition: all 200ms ease-in; 
     transition: all 200ms ease-in; 
    } 
    .navbar-nav>li.active>.nav-line { 
     background-color: transparent; 
    } 
} 

@media (max-width: 767px) { 
    .navbar-nav > li > a { 
     line-height: 30px; 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    #footer { 
     color: #2e2e2e; 
    } 
}

我要么使用500px*536px图片或551px*76px图片。我也希望图像也能有所反应。工作版本可以查看here。

请帮我把图像固定在导航栏的高度。

答

试试这个

CSS

.navbar-brand 
{ 
padding: 4px 0px; 
height: 80px; 
display: block; 
float: none; 
} 

.navbar-brand>img { 
display: block; 
max-height: 100%; 
max-width: 100%; 
margin: auto 40%; 
}

希望这有助于..

是这个工程，。但在响应模式下，它走向最左边。我希望它可以在中间 – v1shnu

hi @ v1shnu修改上面的代码。试一试 –

我给了这个尝试。但现在，在正常模式下，图像向右移动了一点。但以前的改变在正常模式下是正确的。 – v1shnu

答

<!doctype html> 
<html> 
<head> 
<title></title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<script> 

</script> 

<style> 
.navbar { 
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); 
} 

.navbar-default .navbar-nav { 
font-size: 15px; 
} 

.navbar-fixed-top { 
min-height: 80px; 
} 

.navbar-nav>li { 
position: relative; 
} 

.navbar-nav>li>a { 
padding-top: 0px; 
padding-bottom: 0px; 
line-height: 80px; 
} 

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
color: #fff; 
background-color: #b4a28f; 
} 

.navbar-default .navbar-nav .dropdown-menu { 
left: 0; 
right: auto; 
} 

.dropdown-menu>.active>a, 
.dropdown-menu>.active>a:hover, 
.dropdown-menu>.active>a:focus { 
color: #ffffff; 
text-decoration: none; 
outline: 0; 
background-color: #b4a28f; 
} 

@media (min-width: 768px) { 
.navbar-nav>li>.nav-line { 
position: absolute; 
bottom: -1px; 
left: 0; 
background-color: #3178b9; 
height: 3px; 
width: 0%; 
} 
.navbar-nav>li:hover>.nav-line { 
background-color: #3178b9; 
height: 3px; 
width: 100%; 
-webkit-transition: all 200ms ease-in; 
-moz-transition: all 200ms ease-in; 
-o-transition: all 200ms ease-in; 
transition: all 200ms ease-in; 
} 
.navbar-nav>li.active>.nav-line { 
background-color: transparent; 
} 
} 

@media (max-width: 767px) { 
.navbar-nav > li > a { 
line-height: 30px; 
padding-top: 10px; 
padding-bottom: 10px; 
} 
#footer { 
color: #2e2e2e; 
} 
</style> 

</head> 
<body> 

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 

      <div class="row"> 
       <div class="col-sm-10 visible-sm visible-md visible-lg"> 
        <a class="navbar-brand" href=""> 
         <img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions"> 
        </a> 
       </div> 

       <div class="col-xs-2 visible-xs"> 

       </div>    

       <div class="col-xs-8 visible-xs"> 
        <a class="navbar-brand" href=""> 
         <img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions"> 
        </a> 
       </div> 

       <div class="col-xs-2"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 

     </div>   

     </div>  

     <div class="collapse navbar-collapse navbar-right" id="collapse"> 
      <ul class="nav navbar-nav"> 

       <li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a> 
        <div class="nav-line"></div> 
       </li> 
       <li class="dropdown" id="nav-about"> 
        <a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About 
        </a> 
        <ul class="dropdown-menu"> 
         <li><a href="about.html">The Founder</a></li> 
         <li role="separator" class="divider"></li> 
         <li><a href="health-policy.html">HSE Policy</a></li> 
         <li><a href="quality-policy.html">Quality Policy</a></li> 
        </ul> 
        <div class="nav-line"></div> 
       </li> 
       <li><a class="main" href="#services">Services</a> 
        <div class="nav-line"></div> 
       </li> 
       <li><a class="main" href="#projects">Our Projects</a> 
        <div class="nav-line"></div> 
       </li> 
       <li><a class="main" href="#whyus">Why Us</a> 
        <div class="nav-line"></div> 
       </li> 
       <li><a class="main" href="#contact">Contact</a> 
        <div class="nav-line"></div> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

</body> 
</html>

有没有其他的方式来设置中心的图像，而不是使用余裕？ – v1shnu

好的。没有更多的余量。希望你会满意这一个。 –

答

解决方案：

.navbar-brand img{ 
    width: 100%; 
    height: 100px; /*** As per Your Requirement ***/ 
}

导航栏品牌图片不适合导航栏高度

相关推荐