图像css\html\vue上的动态字体大小。js

Question

我需要在图像上设置文本。包含图像的image\div的大小是固定的。我在图像上方得到一些输入，用户可以插入一些文本。文本通过道具注入“图像组件”，然后我需要在图像上显示它。诀窍在于文本有固定的位置。在图像的底部。当然，文本不应溢出图像边框，并且需要最大跨度。我的意思是，如果文本是“短的”（少量字符），那么使用java脚本函数，字体大小应该增加，反之亦然。

我的函数的问题是不够“灵活”，字体大小和文本长度之间的比率太“硬编码”，使用固定值改变了期望的结果。

 <template>
    <div class="img-container z-depth-4">
        <img class="img-to-edit" :src="this.urlChanges">
            <p class="text-append">{{textToAppend}}</p>
    </div>
</template>

<script>

    export default{
        props: ['urlChanges', 'textToAppend'],
        data () {
            return {
                limit: 25,
                font: 35,
                offset: 0
            }
        },
        mounted() {
            let self = this
            $( document ).ready(function() {
                 //that's an input from the parent component
                $('#textarea1').on('keypress', function(e) {

                    let that = $(this);
                    let textLength = that.val().length;

                    if(textLength+self.offset > self.limit) {

                        $('.text-append').css('font-size', self.font + 'px');
                        self.font -= 5;
                        self.offset -=5;
                    }
                });
            });
        },
    }
</script>

风格呢

<style scoped>
    .img-container {
        width: 800px;
        height: 430px;
        overflow: hidden;
        background: #ccc;
        margin: 10px;
        line-height: 150px;
        position: relative;
        text-align: center;
        color: white;
    }

    .img-to-edit {
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
        flex-shrink: 0;
        min-width: 100%;
        min-height: 100%;
    }

    .text-append{
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
    }
</style>

我不确定我的css定义。

Answer 1

您可以使用vh或vw字体大小，在几乎非常高的分辨率下，比率将保持不变

font-size: 5vh

或者

font-size: 10vw