Css 一个图像可以正确调整大小，另一个不能使用Twitter引导

我正在以下网站上使用Bootstrap 2.3.0：

我遇到的问题是，当调整浏览器窗口的大小或当用户使用平板电脑/手机时，页面顶部的两个徽标没有按照我的意愿显示

下面我将在桌面上使用Chrome显示这种行为

情景1：全屏显示，徽标展开，全尺寸显示。我对此很满意。

情况2：屏幕尺寸减小，但徽标仍为全尺寸。我想无论是为标志留在同一行，为标志的规模缩小。

情况3：无论如何修复情况2，这都可能得到解决，但我只是想表明，如果我进一步缩小浏览器宽度，Agrium徽标已经缩放了！但AgTracker的标志没有boooo

---

如果您能帮助我更新CSS或使用Bootstrap的方式，使徽标既能缩放，又能保持在同一行，我们将不胜感激。

有几种方法可以解决此问题：

首先，您应该认识到前两个图像实际上不是两个，而是一个图像。使用此技术，您可以将所有这三个图像组合成单个图像文件，从而生成单个png或jpg文件。我不推荐这样做，所以我想提出一个使用CSS的更健壮的解决方案。请看我的第二点

您可以使用CSS3的内置功能，即CSS3媒体查询。 这项技术允许您创建响应迅速的网站，并能够 指示您的内容在各种设备上的显示方式，如 移动、标签或台式机

---

使用媒体查询来解决这个问题：问题是，当您使用的两个跨距span4和span8达到某个宽度时，它们会清除彼此的浮动，并获得100%的宽度，这就是为什么您将它们分成两行。我知道如何用黑客的方式解决这个问题，但我不会把它作为一个答案，因为它有很多代码，不实用。。。我宁愿等着看是否有任何高质量的帮助出现在这里。祝你好运。在这里使用媒体查询到底有什么帮助？我知道它是如何工作的，但我很想知道它是如何实现@MichaelFreake想要对他的项目做的事情的。如果你有2张像那样并排的图片，有一种方法可以保持一个向左，一个向右，当它们在中间相遇时，它们收缩而不是流向下一行。这是一个jsFoDLE让场景滚动。我添加了背景色和一些ID属性，以便于选择。我还添加了一些媒体查询，看看如何解决这个问题。