跨浏览器SVG preserveAspectRatio

我试图在<img />标记内有一个SVG图形，该标记可以在标记内部保留高宽比（无裁剪）。我在Inkscape中创建了SVG。它在所有浏览器上按预期工作，除了Internet Explorer 9。跨浏览器SVG preserveAspectRatio

要使其工作在IE 9我不得不添加的viewBox="0 0 580 220"和preserveAspectRatio="xMidYMid meet"并删除width="580"和height="220"SVG性能。

<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg>

这似乎无处不在工作，只是直到我试图在的Webkit，其中<img />标签被垂直拉伸虽然SVG的纵横比确实保留。

当我把后面的width="580"和height="220"特性，它适用于的Webkit但IE 9的aspectr比丢失。

是否有针对此行为的跨浏览器解决方案？

好像我找到了解决办法：

你需要保持width和height性能在SVG。

<svg 
    width="580" 
    height="220" 
    viewBox="0 0 580 220" 
    preserveAspectRatio="xMidYMid meet" 
>...</svg>

，并使其工作在IE 9你需要指定<img />标签的至少一个维度。

<img src="your.svg" style="width: 100%" />

这似乎在无处不在。

2013-05-08 11:49:29

我所用“最大宽度：100％”有这个问题在IE10在Windows Phone 8 。使它“宽度：100％”也解决了它。谢了哥们。 – 2013-08-14 09:35:14

这工作奇观！非常感谢 – 2013-10-25 15:02:45

实际上，一旦您在元素上设置了宽度，就不再需要SVG中设置的宽度和高度。 – gzost 2013-12-07 09:58:15

我解决它由以下CSS设置为：

宽度：100％; 最大宽度:(所需的像素宽度）

2015-02-25 14:27:08

适合我，修复IE11中的拉伸问题 - 但是如何？ – 2016-03-31 13:50:51

只是想我会加入我如何步入解决方案。起初，我很难弄清楚一些问题。

2015-07-23 18:05:41

在我的情况的解决方案做了一个网页来形容它了更详细的使用彼得·邬达克的答案，但因为对<img />标签，这打破了布局上的每个使用width: 100%;的非IE9浏览器，我添加了一个IE9的CSS黑客（width: 100%\9\0;）。希望这个补充会帮助别人。 :-)

即使使用preserveAspectRatio="xMidYMid meet"也不是必需的。

（我想只添加评论，没有回答，但没有声誉还没有这样做:-)

2015-11-12 16:20:36 bencergazda

回答