logotipo responsivo en barra de navegacion

[programador_aprendiz]

Saludos amigos tengo el siguiente código de mi pagina web:

Código 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="#navbar" aria-expanded="false" aria-controls="navbar">
						<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="<?php base_url(); ?>inicio">

						<img alt="Nombre Empresa" src="<?php base_url(); ?>images/logotipo-ejemplo-pruebas.png">
						<!--Nombre Empresa o logotipo-->
					</a>

				</div>

				<!--
				Collect the nav links, forms, and other content for toggling 
				-->
				<div id="navbar" class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
					    <li><a href="<?php base_url(); ?>nosotros">Nosotros</a></li>
						<li><a href="<?php base_url(); ?>productos">Productos</a></li>
						<li><a href="<?php base_url(); ?>servicios">Servicios</a></li>
						<li><a href="<?php base_url(); ?>contacto">Contacto</a></li>
					</ul>
				</div> <!--/.nav-collapse -->
   </div> <!-- /container -->
</nav> 

La parte importante donde estoy agregando la imagen a modo de logotipo es esta:

Código HTML:

<a class="navbar-brand" href="<?php base_url(); ?>inicio">
   <img alt="Nombre Empresa" src="<?php base_url(); ?>images/logotipo-ejemplo-pruebas.png">
   <!--Nombre Empresa o logotipo-->
</a> 

al probarlo me doy cuenta de que no se redimenciona ya que tiene un tamaño de 800px x 40px.

Ahora, investigando un poco encontre este otro código css para poder ajusta el logo:

Código:

.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}

segun entiendo hay que sobreescribir las clases de .navbar-brand y .navbar-brand>img para que funcione y al progar de nuevo y jugar un poco a cambiar el tamaño del navegador ya la posicion y tamaño del logo en la barra de navegación se ve un poco mejor, pero la imagen no se redimenciona, es decir que, al hacer el navegador lo mas pequeño posible, el largo del logo queda tal cual.

Jugando un poco con esos estilos que les motre, cambie esto en la clase .navbar-brand>img

Código:

/*width: auto;*/
width: 100%;

al probar nuevamente ahora si me como que da la sensacion de que se "redimenciona".

No se si esta sea la forma correcta de hacer que un logo en la barra de navegación se redimencione de a cuerdo al tamaño de pantalla del dispositivo donde se habra la pagina.

Creo tambien que, algunos ocupan una etiqueta o instruccion llamada @media o algo asi para indicar que esos estilos solo se apliquen en dispositivos.

Lamentablemente estas pruebas las hice desde una computadora de escritorio y no puedo probar desde un telefono o tablet ya que estoy desarrollando en forma local con xampp y codeigniter.

¿podrian ayudarme porfavor?

Por cierto, el código con el que arregle lo del logotipo lo [URL="http://codepen.io/bootstrapped/pen/KwYGwq"]encontre aqui[/URL].