Navbar徽标无法在CSS中使用，但可以在HTML中使用

Question

[尝试使图像适合我正在使用的导航栏。我无法在CSS中使用它，但可以在HTML中使用它。我不想在HTML中仅在CSS中设置徽标样式。图像是“ RPGWizards.jp”这是html

 <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" id="logo" href="#"><img src="Assets/RPGWizards.jpg"></a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="AboutUs.html">About Us</a></li>
        <li><a href="Contact.html">Contact Us</a></li>
        <li><a href="OurProducts.html">Our Products</a></li>
      </ul>
    </div>
  </nav>  

这是CSS

#logo{
    width= 42px ;
    height= 42px;
    }

/NTqjn.jpg

Answer 1

从html中删除img并将其作为background-image的#logo添加：

HTML：

 <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" id="logo" href="#"></a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="AboutUs.html">About Us</a></li>
        <li><a href="Contact.html">Contact Us</a></li>
        <li><a href="OurProducts.html">Our Products</a></li>
      </ul>
    </div>
  </nav>  

CSS：

#logo{
    width= 42px ;
    height= 42px;
    background-image : url("Assets/RPGWizards.jpg");
    background-position: center;
    background-size: contain, cover;
    background-repeat: no-repeat;
}

Answer 2

您使用的width: 48px;语法不正确，在=符号之间有冒号。

类nav-brand具有填充，您需要将其设置为0并将其适合该块。

全屏查看以进行可视化。

a#logo.navbar-brand {
  padding: 0;
}

#logo img {
  width: 48px;
  height: 51px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" id="logo" href="#"><img src="http://placekitten.com/301/301"></a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="index.html">Home</a></li>
      <li><a href="AboutUs.html">About Us</a></li>
      <li><a href="Contact.html">Contact Us</a></li>
      <li><a href="OurProducts.html">Our Products</a></li>
    </ul>
  </div>
</nav>