html - SVG高度不随纵横比调整

This question already has answers here:

SVGs not scaling properly in IE - has extra space

(4 个回答)


4年前关闭。




在 div 中使用了一张宽度为 50px 的 svg 图像，但在 IE11 中，SVG 高度为 150px。它应该是 50px X 50px 。宽度 50px 正确应用而不是高度。任何建议，

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

在此先感谢您的帮助。代码笔:http://codepen.io/shmdhussain/pen/YZmrOq

最佳答案

谢谢 将 width:100% 设置为图像标签后问题已解决。问题已解决 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>

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

关于html - SVG高度不随纵横比调整，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43318614/