SVG Height not adjusting with aspect ratio

Question

Used one svg image in the div with the width 50px, but in IE11 , SVG height is coming as 150px. It should have been 50px X 50px . width 50px is applying correctly not the height. Any suggestion ,

.svg-cont{
  width:50px
}
img{
  max-width:100%;
  height:auto;
}

<div class="svg-cont">
  <img src="http://imgh.us/google-plus-hvr.svg" alt="" />
</div>

Thanks in advance for any help. codepen: http://codepen.io/shmdhussain/pen/YZmrOq

@dejauneetdebleu: The issue I solved after reading some articles about SVG, this one from Sara https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/ helps. setting the width:100% to image solving the issue in IE9-11 — Mohamed Hussain, Apr 10 '17 at 08:58

score 0 · Answer 1 · answered Apr 10 '17 at 09:01

Thanks Issue is solved after setting the width:100% to the image tag . issue resolved pen codepen: http://codepen.io/shmdhussain/pen/XMvzWv

.svg-cont{
  width:50px
}
img{
  max-width:100%;
  width:100%;
  height:auto;
}

<div class="svg-cont">
  <img src="http://imgh.us/google-plus-hvr.svg" alt="" />
</div>

reference: https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

SVG Height not adjusting with aspect ratio

1 Answers1