исправить цифровое изображение на висящей доске, не теряя отзывчивости

Question

У меня есть класс numberdisplay , в котором я хочу отобразить число внутри доски для раздачи.

У меня есть код ниже, который отображает девять полей точно внутри таблички с отзывчивостью.

Моя проблема в том, что цифра numberdisplay не отображается на висящей доске, не реагирует и исправляется, когда размер окна изменяется, выравнивание изменяется.

Я хочу, чтобы numberdisplayed был fixed внутри висящей доски и должен быть отзывчивым.

Как это можно сделать и как этого добиться?

.box {
  width: calc(33.3% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 10%;
  background-color: #99ffff;
}

.numberdisplay {
  margin-left: 73.99%;
  margin-top: 20%;
  margin-bottom: 100%;
  background-color: #ffff00 2px;
  border: px solid #000066;
}

.containerr {
  border: px solid #FF3399;
}

.pic {
  background-size: 100% 100%;
}

p {
  font: "Courier New", Courier, monospace;
  color: #000000;
  text-align: center;
}

body {
  background-image: url(https://image.ibb.co/eV5WW9/background.jpg);
  background-size: 100vw 100vh;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.container2 {
  width: 35vw;
  position: fixed;
  top: 41.5vh;
  left: 14vw;
}

.box p {
  font-size: calc(2vw + 10px);
}

<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">
      <div id="container">
        <div class="box" id="10">
          <p name="values" data-item-index="0">1:40</p>
        </div>
        <div class="box" id="11">
          <p name="values" data-item-index="7">8:10</p>
        </div>
        <div class="box" id="12">
          <p name="values" data-item-index="4">5:35</p>
        </div>
      </div>
      <div id="2container">

        <div class="box" id="10">
          <p name="values" data-item-index="11">12:50</p>
        </div>
        <div class="box" id="11">
          <p name="values" data-item-index="9">10:40</p>
        </div>
        <div class="box" id="12">
          <p name="values" data-item-index="11">12:50</p>
        </div>
      </div>
      <div id="3container">

        <div class="box" id="10">
          <p name="values" data-item-index="0">1:40</p>
        </div>
        <div class="box" id="11">
          <p name="values" data-item-index="3">4:45</p>
        </div>
        <div class="box" id="12">
          <p name="values" data-item-index="2">3:50</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="numberdisplay" id="2">
  <img src="https://via.placeholder.com/75x75?text=11" style="width:160px; height:160px; border-radius: 50%;" border="rounded" />
</div>

Answer 1

Я не могу придумать способ подсчета width и height части изображения с использованием CSS или JS.

Но я могу рассчитать это с помощью hit-and-trial и выясняется, что подвесная доска всегда была 0.16% от ширины фона.

Изменения, сделанные в CSS:

/* for .numberdisplay */
margin-left: 72.5%;
margin-top: 16%;

/* for body */
background-size: 100vw auto;

Javascript:

var body = document.querySelector('body');
var number11 = document.querySelector('.numberdisplay img');

function changeSize() {
  var length = parseInt(window.getComputedStyle(body, null).width) * 0.16; // based on hit and trial

  number11.style.height = length + 'px';
  number11.style.width = length + 'px';
}

window.onresize = changeSize;
changeSize();

Я использовал window.getComputedStyle(Element, null).property для получения ширины тела.

Вот ручка , который будет отображать отзывчивость.