Q:

Image stops scaling with bootstrap-responsive.css at the smallest level

I'm making my first website using Twitter Bootstrap, and am trying to understand why the logo image on my page stops scaling and jumps in size once the screen size reaches a small enough size.
The current behavior makes the site look horrendous on the iPhone.
The image file itself is a 200 x 500 px .gif 
Here is a jsfiddle with the code in it:  http://www.jsfiddle.net/eugip9/uyGH9
And here is the code from the div it's in:
<div class="row">
    <div class="span1">
    <img src="./HomePage/logo-02.gif" center alt>
    </div>
    <div style="text-align:left;padding-top: 5em;text-indent: 5em;"; class="span11">
        <h1>Site Title</h1>
    </div>
</div>

The image scales well down to a point, but once the screen gets small enough the image goes back to 200px x 500px
I'm using the default bootstrap-responsive.css

A:

Every span has a 100% width when the screen is less than 767px. So, due to every image of the theme has a max-width: 100% property, you image is resizing when the screen is less than 767px.
I recommend you to resize the image to the desirable width with Photoshop (or similar). It's not always a good idea to resize images with CSS. If you don't want to do that, just put a id to the image and then put a max-width: 64px to that logo.

