图像 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