SVG height not adjustable with aspect ratio

It uses a single svg image in a div with a width of 50 pixels, but in IE11 SVG height reaches 150 pixels. It should have been 50px X 50px. a width of 50 pixels is correctly applied, not a 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>
Run codeHide result

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

+4
source share
1 answer

Thank. The problem is solved after setting the width: 100% to the image tag. the problem is resolved. Code: 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>
Run codeHide result

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

0

Source: https://habr.com/ru/post/1674452/


All Articles