如何不使用Flex实现SVG图标高度随p、h1等文本标签字体大小自适应

解决方案 #

直接给.heightByFontSize设置以下属性即可：

.heightByFontSize {
  height: 1em;
  width: auto;
  /* 对齐方式可根据需求调整，常用值为 text-bottom / middle */
  vertical-align: text-bottom;
  display: inline-block;
}

属性说明

• height: 1em：em是相对当前上下文字体大小的单位，1em刚好匹配当前所在文本容器的字体高度，会自动适配h1、p、span等不同标签的不同字号尺寸，不需要针对不同标签单独调整。
• width: auto：保证SVG按自身比例缩放，不会出现拉伸变形的问题。
• vertical-align：调整SVG和文本的垂直对齐位置，text-bottom会对齐文本底部，middle会和文本垂直居中对齐，按需选择即可。
• display: inline-block：消除inline元素默认的额外间距，避免SVG和文本之间出现不必要的留白。

注意事项

你使用的SVG标签需要提前设置正确的viewBox属性，比如你的SVG原始尺寸为24*24，就给SVG标签加viewBox="0 0 24 24"即可，不需要在SVG标签上写死固定宽高。

之前方案失效的原因

你之前设置height: 100%不生效，是因为百分比高度需要父元素有显式设置的高度值才能计算，而p、h1、span这类文本标签的高度是由内容自动撑开的，没有显式定义高度，所以100%找不到参考基准，无法生效。

内容的提问来源于stack exchange，提问作者padavan