在SVG圖片中使用最大寬度時，IE無法保持寬高比

Question

我正在使用svg圖像並設置max-width屬性，但是IE僅使用原始高度，即使設置了height: auto ，也不會嘗試保持寬高比。 在這里擺弄

的HTML

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

的CSS

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

更新1

實際上，這個問題在我的svg中特別存在，其他一些svg文件在IE中也可以正常使用。 但是我不知道它們可能有什么問題，它們在其他瀏覽器上運行良好。

更新2

提供的答案解決了我的問題，但是彈出了一個新問題：(

現在，當使用max-width ，圖像可以正確縮放，但是將其包裝在div ，包裝器將獲取圖像的原始全高。 小提琴

Answer 1

您已經在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> 

Answer 2

也可以解決原始問題，而不必重新生成原始SVG。

img {
    max-width: 50px;
    width: 100%; // this seems to solve the problem
    height: auto;
}