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

我正在使用Twitter Bootstrap创建我的第一个网站，并且试图了解为什么我的网页上的徽标图像在屏幕大小达到一定程度时会停止缩放和跳转足够小的尺寸。图像在最小级别停止缩放bootstrap-responsive.css

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

图像文件本身是一个200×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>

图像很好地扩展到一个点，但是一旦屏幕变得足够小的图像可以追溯到200像素X 500像素

我使用的是默认的靴子trap-responsive.css

来源

2013-04-23 Evan

这种类型的问题更好用这样的JsFiddle：http://jsfiddle.net/eugip9/uyGH9/ – Pigueiras 2013-04-23 06:47:24

当屏幕小于767像素时，每个跨度都有100％的宽度。所以，由于主题的每个图像都具有max-width: 100%属性，因此当屏幕小于767像素时，图像的大小将会调整。

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

来源

2013-04-23 06:52:09 Pigueiras

感谢您的回应。有没有更好的方法来制作一个标题栏，在标题栏的左上角显示1，然后标题显示为span11？否则，在iphone上，它们会始终垂直叠放，对吗？ – Evan 2013-04-23 07:25:59

@Evan如果您不想在任何布局中堆叠徽标，请在图像上放置一个“左拉”类，并将标题和图像置于相同的'div.span12'中。我相信如果将图像调整为较小的尺寸，应该完成这项工作。 – Pigueiras 2013-04-23 08:29:18

非常感谢。 CSS对我来说仍然是一种学习体验。 – Evan 2013-04-23 09:42:12

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

回答

相关问题