Proportionally scaling a container with absolute positioned elements so it fits into viewport

Issue

As source material, I got a carefully composed layout, consisting of a div container (960x540) with absolutely positioned elements:

#container {
    position: relative;
    width: 960px;
    height: 540px;
    background-color: #ccc;
}

/* Portraits */
[class*="portrait-"] {
    position: absolute;
    background-color: white;
    width: 102px;
    height: 60px;
    font-size: 2rem;
    text-align: center;
}

.portrait-01 {
    top: 36px;
    left: 536px;
}

.portrait-02 {
    top: 58px;
    left: 648px;
}

.portrait-03 {
    top: 82px;
    left: 760px;
}

.portrait-04 {
    top: 152px;
    left: 794px;
}

.portrait-05 {
    top: 222px;
    left: 810px;
}

.portrait-06 {
    top: 292px;
    left: 794px;
}

.portrait-07 {
    top: 362px;
    left: 760px;
}

.portrait-08 {
    top: 386px;
    left: 648px;
}

.portrait-09 {
    top: 408px;
    left: 536px;
}

.portrait-10 {
    top: 419px;
    left: 424px;
}

.portrait-11 {
    top: 408px;
    left: 312px;
}

.portrait-12 {
    top: 386px;
    left: 200px;
}

.portrait-13 {
    top: 362px;
    left: 88px;
}

.portrait-14 {
    top: 292px;
    left: 54px;
}

.portrait-15 {
    top: 222px;
    left: 38px;
}

.portrait-16 {
    top: 152px;
    left: 54px;
}

.portrait-17 {
    top: 82px;
    left: 88px;
}

.portrait-18 {
    top: 58px;
    left: 200px;
}

.portrait-19 {
    top: 36px;
    left: 312px;
}

.portrait-20 {
    top: 25px;
    left: 424px;
}

<div id="container">
  <div class="portrait-01">P-01</div>
  <div class="portrait-02">P-02</div>
  <div class="portrait-03">P-03</div>
  <div class="portrait-04">P-04</div>
  <div class="portrait-05">P-05</div>
  <div class="portrait-06">P-06</div>
  <div class="portrait-07">P-07</div>
  <div class="portrait-08">P-08</div>
  <div class="portrait-09">P-09</div>
  <div class="portrait-10">P-10</div>
  <div class="portrait-11">P-11</div>
  <div class="portrait-12">P-12</div>
  <div class="portrait-13">P-13</div>
  <div class="portrait-14">P-14</div>
  <div class="portrait-15">P-15</div>
  <div class="portrait-16">P-16</div>
  <div class="portrait-17">P-17</div>
  <div class="portrait-18">P-18</div>
  <div class="portrait-19">P-19</div>
  <div class="portrait-20">P-20</div>
</div>

How can I rewrite code, so the container fills all available space in viewport by scaling all of its children while keeping their original proportions?

A js/jQuery solution would be okay as well as pure HTML/CSS.

Solution

As suggested by @TemaniAfif,

instead of px I would write the whole code using vmin and it's done.

and

(We) need to recalculate all the values using vmin not simply replace px with vmin in your code

here's the code:

#container {
  position: relative;
  width: 172vmin;
  height: 92vmin;
  background-color: #ccc;
}

[class*="portrait-"] {
  position: absolute;
  background-color: white;
  width: 18vmin;
  height: 11vmin;
  font-size: 6.5vmin;
  text-align: center;
}

.portrait-01 {
  top: 6vmin;
  left: 96vmin;
}

.portrait-02 {
  top: 9vmin;
  left: 116vmin;
}

.portrait-03 {
  top: 14vmin;
  left: 136vmin;
}

.portrait-04 {
  top: 27vmin;
  left: 142vmin;
}

.portrait-05 {
  top: 39.5vmin;
  left: 145vmin;
}

.portrait-06 {
  top: 52vmin;
  left: 142vmin;
}

.portrait-07 {
  top: 66vmin;
  left: 136vmin;
}

.portrait-08 {
  top: 71vmin;
  left: 116vmin;
}

.portrait-09 {
  top: 73vmin;
  left: 96vmin;
}

.portrait-10 {
  top: 75.5vmin;
  left: 76vmin;
}

.portrait-11 {
  top: 73vmin;
  left: 56vmin;
}

.portrait-12 {
  top: 71vmin;
  left: 36vmin;
}

.portrait-13 {
  top: 66vmin;
  left: 15.7vmin;
}

.portrait-14 {
  top: 53vmin;
  left: 10vmin;
}

.portrait-15 {
  top: 40vmin;
  left: 7vmin;
}

.portrait-16 {
  top: 27vmin;
  left: 10vmin;
}

.portrait-17 {
  top: 14vmin;
  left: 15vmin;
}

.portrait-18 {
  top: 8vmin;
  left: 35vmin;
}

.portrait-19 {
  top: 6vmin;
  left: 55vmin;
}

.portrait-20 {
  top: 3vmin;
  left: 75.5vmin;
}

<div id="container">
  <div class="portrait-01">P-01</div>
  <div class="portrait-02">P-02</div>
  <div class="portrait-03">P-03</div>
  <div class="portrait-04">P-04</div>
  <div class="portrait-05">P-05</div>
  <div class="portrait-06">P-06</div>
  <div class="portrait-07">P-07</div>
  <div class="portrait-08">P-08</div>
  <div class="portrait-09">P-09</div>
  <div class="portrait-10">P-10</div>
  <div class="portrait-11">P-11</div>
  <div class="portrait-12">P-12</div>
  <div class="portrait-13">P-13</div>
  <div class="portrait-14">P-14</div>
  <div class="portrait-15">P-15</div>
  <div class="portrait-16">P-16</div>
  <div class="portrait-17">P-17</div>
  <div class="portrait-18">P-18</div>
  <div class="portrait-19">P-19</div>
  <div class="portrait-20">P-20</div>
</div>

Answered By - iorgv