阿里矢量图库的 icon 如何根据父元素自动放大缩小?

  • Z时代
  • 2024-03-14
  • 分类：IT

RT
我有一个这样的 icon

<div class="parent">
    <i icon-ks-tubiao-zhuzhuangtu"/>
</div>
这个 parent 是一个vue递归组件

当父元素 宽度是 100px 的时候 i 的大小是 16px
当父元素 宽度是 200px 的时候 i 的大小是 32px
以此类推...

大概效果图
阿里矢量图库的 icon 如何根据父元素自动放大缩小?

但是我尝试设置 百分比的时候 好像无效,只能 显性设置 fontSizeemrem

求问 有没有其他比较 s 的方式~

回答：

简单的就是使用js动态计算，比如算rem或父元素宽度

使用css字体的话比较难实现，想到的一个思路是使用vw设置字体大小，然后用字体撑开父元素

所以不想用js调整的话，建议使用svg

以上是 阿里矢量图库的 icon 如何根据父元素自动放大缩小? 的全部内容， 来源链接： utcz.com/p/936838.html

回到顶部