SVG高度不随纵横比调整[重复]答案

【问题标题】：SVG Height not adjusting with aspect ratio [duplicate]SVG高度不随纵横比调整[重复]
【发布时间】：2017-09-05 05:28:59
【问题描述】：

在 div 中使用了一个 svg 图像，宽度为 50px，但在 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>

【问题讨论】：

SVG 文件中的preserveAspectRatio 属性怎么样？
@dejauneetdebleu：我在阅读了一些关于 SVG 的文章后解决了这个问题，这篇来自 Sara tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css 的文章有所帮助。将宽度设置为 100% 以解决 IE9-11 中的问题

标签： html css svg

【解决方案1】：

感谢将 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>

【讨论】：