javascript - IE10< svg max-width 没有设置正确的比例

Question

我准备了一个 fiddle :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>