使用带有 svg 图像的最大宽度时，IE 不保持纵横比

Posted 2023-03-06

【中文标题】使用带有 svg 图像的最大宽度时，IE 不保持纵横比

【英文标题】：IE not maintaining aspect ratio when using max-width with svg image

【发布时间】：2016-04-21 14:20:43

【问题描述】：

我正在使用 svg 图像并设置 max-width 属性，但 IE 仅使用原始高度并且不会尝试保持纵横比，即使在显式设置 height: auto 时也是如此。 fiddle here

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 中时，该包装器会采用图像的原始全高。 fiddle

【问题讨论】：

工作 svg 的根元素是否具有宽度和高度属性？他们在根元素上有 viewBox 属性吗？

@RobertLongson 是的，问题是由宽度和高度引起的。但即使删除它们后我仍然有一个新问题，请查看更新后的问题。

你应该为你的第二个问题提出一个新问题。

【参考方案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" > 

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>

【讨论】：

谢谢。所以基本上创建这些 svg 文件的人需要在不指定宽度或高度的情况下重新生成它们，对吗？

那或者只是把代码放在那里。它是同一个 SVG，我只是没有像你那样将它保存并引用为外部文件。

【参考方案2】：

原来的问题也可以解决，不用重新生成原来的SVG。

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