css - 一张图片可以正确调整大小，而其他图片不能使用 Twitter Bootstrap

Question

我在以下网站上使用 Bootstrap 2.3.0:www.agrium.com/AgTracker

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

下面我在我的桌面上使用 Chrome 展示了这种行为。

情况 #1:全屏显示， Logo 展开且全尺寸。我对此很满意。

情况 #2:屏幕尺寸减小，但 Logo 仍为全尺寸。我希望 Logo 保持在同一条线上并缩放(缩小) Logo 。

情况 #3:这可能会通过任何修复情况 #2 来解决，但我只是想表明，如果我进一步缩小浏览器宽度，Agrium Logo 会缩放(耶!)但 AgTracker Logo 不会(呜呜)。

任何有关更新 CSS 的帮助或我使用 Bootstrap 的方式允许 Logo 缩放并保持在同一行上的任何帮助将不胜感激。

Answer 1

有几种方法可以解决这个问题:

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

2. 您可以使用 CSS3 的内置功能，称为 CSS3 媒体查询。该技术允许您创建响应式网站并能够决定您的内容在各种设备上的显示方式，例如移动设备、标签页或桌面设备。