Auto-Resize Текст поверх изображения HTML

Question

Я хочу написать 2 номера по изображению, как и что:

Итак, я сделал этот эффект с этим CSS код:

#container { 
    position: relative; 

} 
#image { 
    height: 22%; 
    position: relative; 
    display: inline-block; 
    margin-top:3px; 
    vertical-align: bottom; 


} 
#text { 
    z-index: 100; 
    position: absolute; 
    color: white; 
    font-size: 80px; 
    font-weight: bold; 
    font-family:nexa; 
    left: 150px; 
    top: -50px; 
} 
#textdx { 
    position: absolute; 
    color: #787d83; 
    font-size: 80px; 
    font-weight: bold; 
    font-family:nexa; 
    float:right; 
    width:50%; 
    right: 150px; 
    top: -50px; 
} 

и это мой HTML-код:

<div id='container'> 
<img id='image' src='imgA.png'></img> 
<p id='text'>5</p> 
<p id='textdx'>5</p> 
</div> 

<div id='container'> 
<img id='image' src='imgB.png'></img> 
<p id='text'>6</p> 
<p id='textdx'>6</p> 
</div> 

проблема, когда я изменить размер моего окна браузера или я оп еп страницы на компьютере с различными размерами экрана и результаты:

Как я мог бы решить эту проблему?

Answer 1

Эта проблема возникает из-за того, что в классе #text вы устанавливаете значение слева на 150 пикселей, что означает, что он подсчитывает левый 150 пикселей и отображает белый текст, а в #textdx вы устанавливаете право на 150 пикселей, что означает, что он рассчитывается из правый 150px и показывает белый текст. Итак, для того, чтобы решить эту проблему, просто использовать те же свойства в обоих классах (справа или слева), как в приведенном ниже коде:

#text { 
    ... 
    left: 150px; 
    ... 
} 

#textdx { 
    ... 
    left: 250px; 
    ... 
} 

Пожалуйста, дайте мне знать, если это поможет вам, или вы ожидали что-то другое ,

Answer 2

Чтобы решить эту проблему, вам нужно использовать значения процентов для позиций вместо фиксированных значений пикселей. также вы должны изменить размер шрифта текста в соответствии с шириной окна с помощью JavaScript (я выбираю окно в качестве ссылки в моем примере). вот мой пример кода (я скачал и использовал свой первый файл):

HTML:

<div class='container'> 
     <div class="inner-container"> 
     <img class='image' src='img/imgA.png'></img> 
     <p class='num text'>5</p> 
     <p class='num textdx'>5</p> 
     </div> 
    </div> 

CSS:

<style> 
    .container { 
     display: inline-block; 
     position: relative; 
     width: 50%; 
    } 

    .image { 
     width: 100%; 
    } 

    .text { 
     position: absolute; 
     margin: 0px; 
     top: 7%; 
     left: 23%; 
    } 

    .textdx { 
     position: absolute; 
     margin: 0px; 
     top: 39%; 
     left: 76%; 
    } 

    .num { 
     font-size: 70px; 
    } 
    </style> 

ЯШ:

<script> 
     var windowInitWidth = window.innerWidth; 
     var nums = document.getElementsByClassName('num'); 

     // get the value of num font-size 
     var numFontSize = window.getComputedStyle(nums[0]).getPropertyValue("font-size"); 
     numFontSize = Number(numFontSize.replace("px", "")); 

     console.log(numFontSize); 

     // update the text font-size when resizing the window 
     window.addEventListener("resize", function() { 
     for(var i = 0; i < nums.length; i++) { 
      nums[i].style.fontSize = (window.innerWidth/windowInitWidth * numFontSize) + 'px'; 
      console.log(nums[i].style.fontSize) 
     } 
     }) 
    </script>