css - 在 Internet Explorer 10-11 中缩放 .svg

Question

我在 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 .

Answer 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/