在 Internet Explorer 10-11 中缩放 .svg

【问题标题】：Scaling .svg in Internet Explorer 10-11在 Internet Explorer 10-11 中缩放 .svg
【发布时间】：2016-09-09 08:58:17
【问题描述】：

我在 Internet Explorer 10-11 中缩放 svg 时遇到问题。它适用于其他浏览器。 html:

<ul>
    <li><a href="#">English <img src="https://lipis.github.io/flag-icon-css/flags/4x3/gb.svg" alt=""></a></li>
</ul>

CSS：

li img {
    width: 19px;
    height: 13px;
}

如何缩放图像以使其适合 IE10+11 中所需的宽度？

See this fiddle.

【问题讨论】：

标签： css svg

【解决方案1】：

您可以将图像放入容器中，并在该容器上指定宽度和高度。

HTML

<ul>
    <li>
      <a href="#">
        English 
        <div class="img-container">
          <img src="https://lipis.github.io/flag-icon-css/flags/4x3/gb.svg" alt="">
        </div>
      </a>
    </li>
</ul>

CSS

li .img-container {
    width: 19px;
    height: 14px;
}

li img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    outline: none;
    border: none;
}

https://jsfiddle.net/6e47sxhg/5/

【讨论】：