I need to set text over image. The size of the image\div containing the image is fixed. I got some input above the image that the user insert some text. the text is injected via props to the "image component" and then i need to display it over the image. the trick is that the text have fixed place to be. at the bottom of the image. the text should not overflow the image borders of course and need to span at the maximum. I mean that if the text is "short" (low amount of characters) the font size should increase and vice versa using java script function.
the problem with my function its not "flexible" enough, the ratio between the font size and the text length is too "hard coded" with fixed values that changed the desired result.
<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>
and the style
<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>
im not sure about my css definition.
