如何处理图像上的文本并调整大小？ （vuejs，CSS）

Question

我正在使用vueJS，在我的项目中，我有很多图像（如小图标），其中可能包含文本。

这是一个丑陋的例子

所以我创建了一个vueJS视图来处理这些图像。

不幸的是，在更改图像大小时，我没有设法得到任何正确的信息...我尝试使用百分比，但它根本不起作用，文本超出了图标的高度。最好的办法是，在我调整图像大小的同时调整文本大小。

关于我应该如何进行的任何想法？

非常感谢您的建议。

这是一个例子

<icon iconname="cloud" :amount="cloudamount"></icon>

这是Vue视图

<template>
<div>
    <div class="container-icon">
        <img :src="img_path" :style="styles">
        <span v-if="iconname=='cloud'" class="icon-cloud">{{amount}} km</span>
        <span v-if="iconname=='heart'" class="icon-heart">+{{amount}}</span>
    </div>
    </div>
</template>


<script>
export default {
    name:'icon',
    props:
    {
        iconname: {
            type: String,
            required: true,
            default: "default"
        },
        amount: {
            required: false,
            default: ""
        },
        height: {
            type: String, required:false, default: ''
        },
        width: {
            type: String, required:false, default: ''
        }
    },
    computed:{
        styles: function(){
            var mystyle='';
            if(this.width!=''){
                mystyle = mystyle + 'min-width: '+this.width+'; max-width: '+this.width+';';
            }
            if(this.height !=''){
                mystyle = mystyle +  'min-height: '+this.height+'; max-height: '+this.height;
            }
            return mystyle;
        },
        img_path: function () {
            return '/images/icons/'+this.iconname+'.png';
        }
    }
}
</script>

<style>
.icon-cloud{
    color:green;
    position: absolute;
    left: 8%;
    top: 0.2em;
}
.icon-heart{
    color:black;
    position: absolute;
    left: 13%;
    top: 0.2em;
    max-width: 1em;
}
</style>

我正在使用bootsrtap 4，但不确定是否提供任何信息：）