navbarの反応的なブランドイメージ

Question

navbarの画像に問題が発生しました。小さくすると画像が縮小ボタンで押し下げられることがあります。メディアクエリを使用せずに画像を反応的にすることは可能ですか？なぜなら、初心者がメディアクエリを使ってイメージを反応的にするのは悪い習慣だと思うので、メディアクエリーを使わずにこれを可能にする他の方法があると思います.html、css、そしてブートストラップには初めてです。前もって感謝します。

最小化しない場合の画像です。

ここでは、画像が縮小ボタンでプッシュダウンされているのを見ると最小化された画像です。

ここはnavbarのHTMLコードです。ここ

<div class="collapse navbar-collapse" id="nav-collapse"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">Students</a></li> 
     <li><a href="#">Faculty</a></li> 
     <li><a href="#">Contact us</a></li> 

    </ul> 

    <ul class="nav navbar-nav navbar-right"> 
       <li><a data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
       <!-- Modal --> 
        <div id="myModal" class="modal fade" role="dialog"> 
         <div class="modal-dialog"> 
       <!-- Modal content--> 
         <div class="modal-content"> 
          <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
          </div> 
          <div class="modal-body"> 
           <p>Some text in the modal.</p> 
          </div> 
          <div class="modal-footer"> 
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
          </div> 
         </div> 
         </div> 
        </div> 
     </ul> 
     </div> 
    </div> 
    </nav> 

はあなたがアンカータグであなたのイメージをラップし、それをナビゲーションバーブランドのクラスを与え、与えることができ、私のcss

.navbar-default .navbar-nav > li > a { 
font-weight: 590; 
color: #949494; 
display: block; 
padding: 5px 35px 2px 45px; 
border-bottom: 3px solid transparent; 
line-height: 97px; 
text-decoration: none; 
transition: border-bottom-color 0.5s ease-in-out; 
-webkit-transition: border-bottom-color 0.5s ease-in-out; 
} 
.navbar-default{ 
background-color:#fff; 
margin: 0; 

} 
.nav>li>a { 
position: relative; 
} 
.navbar-default .navbar-right > li > a { 
padding-left: 70px; 
padding-right: 1px; 
} 
.navbar-default .navbar-toggle .icon-bar { 
background-color: #000000; 
margin:0 0 4px; 
width: 25px; 
height: 5px; 

} 
.nav.navbar-nav > li{ 
display: :inline-block; 
} 
.nav.navbar-nav{ 
list-style-type:none; 
} 
.nav.navbar-nav > li > a:hover{ 
    color:#a92419; 
    border-bottom-color: #a92419; 
    } 

     .navbar-default .navbar-toggle .icon-bar { 
     background-color:#a92419 ; 
     margin:0 0 4px; 
     width: 25px; 
     height: 5px; 

     } 
     .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{ 
     background: none; 
     } 
     button.navbar-toggle{ 
     background:none; 
     border:none; 
     color:#000; 
     } 

Answer 1

ですidをイメージする。

<a class="navbar-brand" href="#"><img id="logo" src="logo.png"></a> 

navbar-brandクラスは、応答性を高めるのに役立ち、id #logoを使用して画像のサイズと配置を制御できます。このリンクをチェックして、navbar-brandクラスをイメージ用に使用する方法についての話をブートストラップしてください。 http://getbootstrap.com/components/#navbar-brand-image