CODEWITHSUNDEEP
csssvg
Meek
Meek

Reputation: 3348

Scaling .svg in Internet Explorer 10-11

I have problems scaling a svg in Internet Explorer 10-11. It works in other browsers. 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;
}

How can I scale the image so that it fits to the desired width in IE10+11?

See this fiddle.

Upvotes: 1

Views: 339

Answers (1)

Eria
Eria

Reputation: 3182

You can put your image in a container and specify width and height on this container.

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/

Upvotes: 1

Related Questions