モバイルではロゴのサイズを変更しないでください。

私はNAV李/ハンバーガーの残りの部分にそれが消えるまで画像を縮めつつある、と私も携帯電話でそれを同じサイズを維持したい、とも平準化されて何が起こっているのかと考えていモバイルではロゴのサイズを変更しないでください。

<!DOCTYPE html> 

<head> 
</head> 

<body> 
    <style> 
    /* --- header -- */ 

    .navbar-header div.logo { 
     margin-top: -1%; 
     padding-bottom: 0; 
    } 

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

    .navbar-header div.logo a.navbar-brand img { 
     width: 6%; 
     padding: 15px; 
    } 

    navbar-nav .navbar-brand { 
     display: flex; 
     align-items: center; 
    } 

    .navbar-nav .navbar-brand>img { 
     padding: 7px 14px; 
    } 
    /****override navbar height********/ 

    .navbar-nav > li > a { 
     padding-top: 4px !important; 
     padding-bottom: 2px !important; 
    } 

    .navbar { 
     min-height: 5px !important 
    } 
    /*********************************/ 

    header .navbar { 
     margin-bottom: 0; 
    } 

    .navbar-default { 
     border: none; 
    } 

    header .navbar-collapse ul.navbar-nav { 
     float: right; 
     margin-right: 0; 
    } 

    header .navbar-default { 
     background-color: transparent; 
    } 

    header .navbar { 
     min-height: 32px; 
    } 

    header .navbar-nav > li { 
     padding-bottom: 5px; 
     padding-top: 5px; 
    } 

    header .navbar-nav > li > a { 
     padding-bottom: 5px; 
     padding-top: 5px; 
     margin-left: 2px; 
     line-height: 30px; 
     font-weight: 700; 
    } 

    </style> 

    <header> 
    <div class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <div class="logo"> 
      <a class="navbar-brand" href="index.php"><img src="./img/logo.png"></a> 
      </div> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li><a href="about.php">about us</a></li> 
      <li><a href="contact.php">Contacts</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </header> 

    <div>content</div> 

</body>

んロゴを消したり、移動したり、サイズを変更したりしないようにする方法を知っています。

出典

2017-03-10 patriciacodes

ターゲットロゴあなたのCSSと、その設定されたサイズにし、％は、それがの相対だとして、それを同じサイズを維持するつもりはありません親も、bodyタグにあなたのスタイルルールを持っています、なぜあなたはheadタグにそれらを持っていませんか？ – PhilS

画像を％でサイズ設定したので、設定したサイズに変更する必要があります。これは：

.navbar-header div.logo a.navbar-brand img { 
    width: 6%; 
    padding: 15px; 
}

はこのようなものでなければなりません：

.navbar-header div.logo a.navbar-brand img { 
    width: 200px; 
    padding: 15px; 
}

出典

2017-03-10 15:58:29

モバイルではロゴのサイズを変更しないでください。

答えて

関連する問題