Javascript IE10<；svg最大宽度未设置正确的比例

我准备了一把小提琴：

爸爸{
宽度：250px；
高度：50px；
}
.papa>img{
最大宽度：250px；
最大高度：50px；
}

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

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

对于IE 10及以下版本，有没有办法解决这个问题？如果没有，Javascript可能会计算尺寸？

---

（为什么我不直接设置svg的实际高度和宽度？？？因为我有img元素动态加载客户端的svg徽标-当然每个都有不同的尺寸）

svg图像的自然高度/宽度是601x601（参见源代码），即一个正方形。。。因此，最大高度（或高度）和最大宽度（或宽度）规则必须相同，以保持纵横比

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

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

爸爸{
宽度：250px；
高度：50px；
}
.papa>img{
宽度：50px；
保证金：0自动；
}

删除最大高度规则。。。缩放图像的常见设计模式是将图像的大小调整为其父元素的百分比。例如。。。指定要使用计算的自然纵横比渲染的图像的高度或宽度。Rob。因为svg可以更宽，也可以高于250px/50px的比率，所以将宽度或高度设置为100%不起作用。你说“计算的自然长宽比”这是什么意思？（我说过容器“papa”可以加载任何我以前不知道的svg大小），而这段代码可能会回答这个问题，提供关于为什么和/或如何回答这个问题的额外上下文，以提高其长期价值。papa元素的最大高度必须为50px，最大宽度必须为250px（根据我最初的问题）svg需要扩展到这一点。你的回答不是这样的：

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

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