图像在最小级别使用 bootstrap-responsive.css 停止缩放

Question

我正在使用 Twitter Bootstrap 制作我的第一个网站，并试图了解为什么我的页面上的徽标图像会在屏幕尺寸达到足够小的尺寸后停止缩放并在尺寸上跳跃。

当前的行为使该网站在 iPhone 上看起来很可怕。

图像文件本身是 200 x 500 像素的 .gif

这是一个带有代码的 jsfiddle：http://www.jsfiddle.net/eugip9/uyGH9

这是它所在的 div 中的代码：

<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>

图像可以很好地缩小到一个点，但是一旦屏幕变得足够小，图像就会变回 200px x 500px

我正在使用默认的 bootstrap-responsive.css

Answer 1

当屏幕小于 767 像素时，每个跨度都有 100% 的宽度。因此，由于主题的每个图像都有一个max-width: 100% 属性，当屏幕小于 767 像素时，您的图像正在调整大小。

我建议您使用 Photoshop（或类似软件）将图像调整为所需的宽度。使用 CSS 调整图像大小并不总是一个好主意。如果您不想这样做，只需在图像中添加一个 id，然后在该徽标中添加一个max-width: 64px。