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

Question

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

当前的行为使网站在 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 像素时，每个 span 的宽度都是 100%。因此，由于主题的每张图片都有一个 max-width: 100% 属性，当屏幕小于 767 像素时，您的图片会调整大小。

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