сделать элемент класса прикрепленным к позиции с отзывчивостью

Question

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

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

My problem is the the numberdisplayeddidn't displayed in hanging board is not responsive and fixed. when window resizes the size an alignment changes.

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

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

.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

В вашем коде font-size: calc(2vw + 10px); делает размер шрифта не менее 10 пикселей;Вы должны определить размер шрифта только с vw; Например font-size: 3vw;

.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: 3vw;
}

<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 2

Лучшим вариантом будет иметь не одно полное фоновое изображение, а элемент <div> с доской в ​​качестве фонового изображения.

Так что у вас не будет таких проблем, потому что вы хотитеизменить размер вашего элемента на основе всего фонового изображения страницы.Это не лучшее решение в этом случае.

РЕДАКТИРОВАТЬ Что-то вроде tis:

.container {
  width: 100vw;
  height: 100vh;
  background: #AFFFDC;
}

.board {
  display: flex;
  /* replace me with the board .png image. Take also a look at the background: cover; property etc. to adjust the image size for different screens */
  background: #B1C296;
  /* I need the size of the board */
  width: 300px;
  height: 200px;
  /* just for demo to show the container */
  padding: 10px;
}

.board--table {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.board--time {
  width: calc(33.33% - 4px);
  align-items: center;
  justify-content: center;
  display: flex;
  border-radius: 10%;
  background-color: #99ffff;
  border: 2px solid #333;
}

<div class="container">
  <div class="board">
    <div class="board--table">
      <div class="board--time"><span>1:40</span></div>
      <div class="board--time"><span>1:40</span></div>
      <div class="board--time"><span>1:40</span></div>
      <div class="board--time"><span>1:40</span></div>
      <div class="board--time"><span>1:40</span></div>
      <div class="board--time"><span>1:40</span></div>
      <div class="board--time"><span>1:40</span></div>
      <div class="board--time"><span>1:40</span></div>
      <div class="board--time"><span>1:40</span></div>
    </div>
  </div>
</div>