Javascript 动态拉伸和缩放字体图标

我看过无数的片段，包括字体作为“背景图像”：

结果:

是否有一种方法可以使字体动态调整大小，以100%填充背景图像，类似于使用的任何方法？或者有什么方法可以在响应页面中将其正确用作背景图像，而我不知道它将填充的容器的宽度/高度

我正在考虑使用转换： 但在我的情况下，这很难，因为我不知道我需要扩展多少

我想我会问这个问题，因为也许有一种方法可以做到这一点，在回到一个普通的旧背景图像之前

其他没有帮助的链接（很多）：

---

所以你想让图标根据div的大小改变大小？我想让图标填充div。比如

背景大小：cover

@David最好使用

svg

如果你不确定

高度

宽度，因为字体不是你可以用

背景尺寸来管理的：封面

它必须用

字体尺寸

来管理，那么你可以选择

svg

即你想要的最合适的字体用图标填充你想要的任何大小的背景图像。那么，你为什么不试试用JavaScript计算字体大小呢。另外，还有一个用于字体大小的

vw

单位，可以根据视口宽度进行调整。我只是想用

div 
{
    width : 100%;
    height : 200px;
    margin : 20px;
    background-color : grey;
    color : #fff;
    position : relative;
}

div:before
{
      position:absolute;
        font-family: FontAwesome;
        top:0;
        left:0px;
      font-size : 100px;
      content: "\f003";
}