Bootstrap responsive website but fix on a certain width - twitter-bootstrap-3

Question

I've got several questions regarding bootstrap.
Is there a way to make a bootstrap site fixed on a certain view (320px) when resizing it on a pc? how would you go about it? im currently using chrome to test it.
another thing, i have this logo on the navbar, is there a way to insert an image in it and automatically resize it using a css styling rather than making the image smaller on a image editor, also put it infront of the navbar not inside it.
when i resize the website smaller than 200px width, banner image goes smaller and shows the background behind the jumbotron. how can i make the image snuggly fit the top navbar?
Practice Website 1 Bootstrap
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>ABOUT US</li>
<li>LINKS</li>
<li class="dropdown"> <!-- Dropdown Link Start-->
MEDIA<b class="caret"></b>
<ul class="dropdown-menu">
<li>FACEBOOK</li>
<li>TWITTER</li>
</ul> <!-- Dropdown Link End-->
</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div> <!-- Navigational Start Container-->
<div class="jumbotron">
<h1>Success!!!</h1>
Removed Jumbotron Padding and Margin/ still not a success
<div class="container"> <!-- Grid System Content -->
<div class="row">
<div class="col-md-4">
<h3>LOREM IPSUM DOLOR 1</h3>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit<a class="btn btn-danger">ReadMore</a></p>
</div>
<div class="col-md-4">
<h3>LOREM IPSUM DOLOR 2</h3>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit <a class="btn btn-danger">ReadMore</a></p>
</div>
<div class="col-md-4">
<h3>LOREM IPSUM DOLOR 3</h3>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit. <a class="btn btn-danger">Read More</a></p>
</div>
</div>
</div>
<!-- Footer Start-->
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left ">KREATIV TECH COPYRIGHT 2014</p>
Subscribe on Youtube
</div> <!-- Footer Start-->
<!-- jquery and javascript start script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script> <!-- JS End Script-->

Answer 1

1) You can set you're rows classes to col-xs-#number where #number is between 1 and 12 depending on how wide the row is. This will mean that you're site is "meant" for mobile/smaller screens, and any desktop/larger screens use of it will have the same styling.
2) You could do:
<img src="/urlpath.jpg" id="images_id" />
and
#images_id {
height: desired_height;
width: desired_width;
}
3) you can give the image a class of 'img-responsive'. Or you can set the image size relative to the navbar width and height and it will shrink as the navbar does.