Отзывчивый имидж бренда на navbar

Question

У меня возникла проблема с изображением на навигаторе, когда я попытался свести его к минимуму, поскольку изображение может быть нажато кнопкой свернуть. Можно ли заставить изображение реагировать без использования мультимедийных запросов? Потому что я думаю, что это плохая практика, поскольку новичок использует медиа-запросы, чтобы заставить образ реагировать, и я думаю, что есть другие способы сделать это возможным без использования медиа-запросов :) Im new для html, css, а также для загрузки. Заранее спасибо.

Вот изображение, когда оно не сведено к минимуму.

Вот изображение, если оно сведено к минимуму, так как вы можете видеть, что изображение сбрасывается кнопкой свернуть.

вот мой 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

Вы можете обернуть изображения в теге привязки и дать ему класс NavBar-бренда и дать image id.

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

Класс Navbar-бренд поможет придать ему, что отзывчивость, и вы можете использовать #logo ID контролировать размер и размещение изображения. Ознакомьтесь с этой ссылкой, чтобы начать рассказ об использовании класса навигационных брендов для изображений. http://getbootstrap.com/components/#navbar-brand-image