1

我正在使用 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

4

1 回答 1

2

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

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

于 2013-04-23T06:52:09.740 回答