IE10＆LT; svg max-width没有设置正确的比例

Question

我准备了一个小提琴：https://jsfiddle.net/uj0uhkkq/1/

<div class="papa">
    <img src="image.svg" />
</div>

<style>
.papa {
  width: 250px;
  height: 50px;
}
.papa>img {
  max-width: 250px; 
  max-height: 50px;
}
</style>

在IE 10及以下版本中，图像如下所示：

...在任何其他“最近的”浏览器中，svg具有正确的比例。

有没有办法解决这个IE 10及以下版本？如果没有，Javascript可以计算尺寸吗？

（为什么我不只是设置svg的实际高度和宽度呢？因为我有动态的客户端的img-element加载svg-logos - 当然每个都有不同的尺寸）

Answer 1

svg图像的自然高度/宽度为601x601（参见https://upload.wikimedia.org/wikipedia/commons/f/f4/I-8_%28AZ%29.svg的来源），即方形...所以最大高度（或高度）和最大宽度（或宽度）规则必须保持宽高比是一样的....

    <div class="papa">
    <img src="image.svg" />
</div>

<style>
.papa {
  width: 250px;
  height: 50px;
}
.papa>img {
  width: 50px; 
  margin:0 auto;
}
</style>