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

Question

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

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

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

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

情况 #2：屏幕尺寸减小，但徽标仍然是全尺寸。我希望徽标保持在同一条线上，并希望徽标缩放（缩小）。

情况 #3：这可能会通过任何修复情况 #2 来解决，但我只是想表明，如果我进一步缩小浏览器宽度，Agrium 徽标已经缩放（耶！）但 AgTracker 徽标没有（嘘）。

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

Answer 1

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

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

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