跨瀏覽器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

回答