Как бороться с текстом на изображениях, с изменением размера?(vuejs, CSS) - PullRequest
Новая
       13

Как бороться с текстом на изображениях, с изменением размера?(vuejs, CSS)

0 голосов
/ 08 июля 2019

Я работаю с vueJS, и в моем проекте у меня много изображений (например, маленьких значков), которые могут содержать текст.

Вот ужасный пример enter image description here

Итак, я создал представление 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, но не уверен, что он дает какую-либо информацию:)

...