當使用svg圖像的最大寬度時，IE不保持寬高比

我使用svg圖像並設置max-width屬性，但IE只使用原始高度，並且不嘗試保持寬高比，即使明確設置height: auto 。 fiddle here 當使用svg圖像的最大寬度時，IE不保持寬高比

HTML

<img src="http://dauntless.herokuapp.com/assets/images/who-we-are-nav-f35af64a3b.svg">

CSS

img { 
    max-width: 50px; 
    height: auto; 
}

UPDATE1

其實這個問題是特別目前我svgs，其他一些SVG文件與IE瀏覽器正常工作。但我不知道他們可能會出現什麼問題，他們可以在其他瀏覽器上正常工作。

UPDATE2

答案提供瞭解決我的問題，但使用max-width當正確的圖像縮放，但在div該包裝採用圖片的包裝，當一個新的問題冒出:(

現在原始高度fiddle

來源

2016-01-15 Amr Noman

執行工作svgs具有寬度和根元素高度屬性？它們是否具有根元素上的viewBox屬性？ –

@RobertLongson是的，問題是由寬度和高度引起的。但即使刪除它們，我仍然有一個新問題，請參閱更新的問題。 –

您應該針對第二個問題提出一個新問題。 –

您已經明確地在SVG的開始標記中設置了寬度和高度，如果將它們移除，這可以在IE中使用（在IE11中測試）：

個

img, svg { 
 
    max-width: 50px; 
 
    height: auto; 
 
}

Has height set: <img src="http://dauntless.herokuapp.com/assets/images/who-we-are-nav-f35af64a3b.svg" alt=""> 
 

 
Does not have height set: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174 174"><g fill="#715f6a"><path d="M113.72 95.354c-.477.516-1.11.808-1.85.95-.222.047-.443.02-.66.02-.97 0-1.87-.258-2.508-.943-.802.14-1.455.62-1.725 1.62h8.472c-.275-1-.928-1.507-1.73-1.646z"/><path d="M87.28 1.105c-47.535 0-86.07 38.536-86.07 86.072s38.535 86.07 86.07 86.07c47.537 0 86.072-38.534 86.072-86.07 0-47.536-38.535-86.072-86.07-86.072zm9.438 45.412a8.808 8.808 0 0 1 8.81 8.81c0 4.867-3.944 8.813-8.81 8.813-4.867 0-8.81-3.947-8.81-8.813a8.81 8.81 0 0 1 8.81-8.81zm-29.123-.003c4.867 0 8.813 3.944 8.813 8.81a8.814 8.814 0 0 1-8.813 8.813c-4.866 0-8.81-3.947-8.81-8.813a8.81 8.81 0 0 1 8.81-8.81zM106.93 128h-.002a4.65 4.65 0 0 1-4.664-4.65l-.004-6.35h9.33l.003 6.344A4.658 4.658 0 0 1 106.93 128zM124 116H98V97h6.62c.286-2 1.528-3.25 3.142-3.748-1.072-5.357-3.69-13.638-4.392-15.438-.702-1.796-2.014-1.245-1.075.486 1.384 3.3 2.99 8.896 4.145 14.418-1.27.66-2.235 1.282-2.713 3.282h-2.22c-1.594-1-2.883-2.412-3.315-4.428l-1.67-7.89c-2.284 2.4-5.79 3.516-11.45 3.815a3.398 3.398 0 0 1-3.207 2.234 3.29 3.29 0 0 1-.467-.044c-7.228-.988-11.28-2.637-13.735-5.503L66.12 91.38c-.497 2.322-2.125 3.808-4.054 4.575l-.017 27.767a4.665 4.665 0 0 1-4.665 4.665 4.67 4.67 0 0 1-4.665-4.67l.02-29.35c-1.84-1.564-2.972-3.84-2.43-6.38l4.077-18.835c.758-3.543 4.35-5.15 7.4-5.15h.026s1.075-.174 2.004 0c.968.186 1.82.564 1.82.564 2.248 1.09 4.398 3.3 4.664 6.037.033.13.08.237.098.377.627 4.424 1.102 7.207 2.404 8.71 1.004 1.164 2.9 1.99 6.12 2.647a3.408 3.408 0 0 1 2.907-1.644c5.33 0 8.3-.537 9.618-1.74 1.28-1.166 1.874-3.814 2.47-7.995.018-.14.064-.266.096-.4.266-2.736 2.417-4.99 4.664-6.082 0 0 .848-.465 1.82-.65.93-.18 2-.182 2-.182l.027-.003c3.054.09 5.503 1.79 6.263 5.332 0 0 5.35 20.998 5.785 23.227.06.292.062.76.046 1.044 1.633.484 2.894 1.758 3.182 3.758H124V116z"/></g></svg>

來源

2016-01-15 22:23:56 BSMP

謝謝。那麼基本上誰創建這些SVG文件需要重新生成它們，而不指定寬度或高度，是正確的？ –

這或只是在那裏的代碼。這是一樣的SVG，我只是沒有保存並像它一樣將其作爲外部文件引用。 – BSMP

我有一個新問題:(請參閱更新的問題 –

當使用svg圖像的最大寬度時，IE不保持寬高比

回答

相關問題