Internet Explorerの拡張子.svg 10-11

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/