Css 浏览器缩放和.svg图片

我正在使用我在Adobe Illustrator中制作的.svg图片，并使用以下css将它们附加到背景上：

（集装箱）

（图片）

.my svg{/*svg到：对象、img或内联*/
显示：块；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；/*仅适用于*/
}

然后在html中使用object命令：

<object class="my-svg" type="image/svg+xml" data="/img/composite/scale2.svg" width="100%" height="100%"></object>

经过很多努力，我终于用100%（默认）变焦让它们在IE和Chrome中看起来不错，但当我切换到Firefox时，它们显然使用了不同的默认变焦，图片太大了

您可以在网站上看到：

---

如何使.svg图片通过缩放进行适当缩放？因此，如果我缩小和放大（在浏览器中），那么图片将与背景进行适当的缩放。

我很快就检查了Mozilla和Chrome浏览器中的Gear行为。（顺便说一句，可爱的设计：-）

在我看来，档位与您的

框的大小一致。这意味着，如果允许此框在浏览器放大和缩小时“调整大小”，则齿轮将采用。通过将

设置为0,0/100%，100%，齿轮无法采用

您有这个

.limit.tight

定义，这是一个很好的齿轮箱行为示例。因此，如果我相应地修改.svg，如下所示：

.my-svg {
  display: block;
  margin-left: auto;
  max-width: 960px;
}

我没有改变其他任何事情。它也适用于Chrome。以下是使用Mozilla缩放时齿轮的显示方式：

---

我希望这终于是一个好的开始，即使在更多的浏览器上还有更多的工作。

当您使用

而不是对象时，情况如何？图像具有更广泛的支持，并且看起来更可预测。当我使用命令而不是时，图像在internet explorer中的行为非常奇怪。当我第一次打开页面时，它看起来很好，但是当我点击一个链接打开页面时，图片的形状改变了。这很难解释，我只是没能让它在IE中工作，但在chrome和firefox中工作得很好，你可能想把其中的一个齿轮移动一点，这样它们就不会锁在一起了。试着旋转其中一个，你们会明白我的意思。谢谢，这有助于解决很多缩放问题。这个问题在firefox上仍然存在，100%缩放，svg图片有点太大。我注意到了为什么我的Firefox浏览器会强制使用@media-only屏幕和（最大宽度：1400px）、屏幕和（最大高度：800px）设置，尽管我运行的是1920x1080的windows。我的Chrome浏览器和IE浏览器不这么做。如果我用Firefox测试网页，它就没有这个问题。

<object class="my-svg" type="image/svg+xml" data="/img/composite/scale2.svg" width="100%" height="100%"></object>

.my-svg {
  display: block;
  margin-left: auto;
  max-width: 960px;
}