как сделать backgroundImage полностью отображаемым внутри коробки

Question

У меня есть две коробки с идентификатором box1 и box2, я загружаю изображения в коробку из массива items.

url каждого элемента добавляется в backgroundimage каждого блокаиспользование для цикла.

моя проблема в том, что backgroundImage * не отображается полностью внутри поля *

как сделать backgroundImage полностью видимым внутри поля?

var array2 = [];

var items = [{
    label: 'first',
    url: 'https://i.ibb.co/0DvMRj4/wcheetah.png'
  },
  {
    label: 'second',
    url: 'https://i.ibb.co/gDqm8Dv/wcrow.png'
  },
];
var tempimages = [];
array2 = items.slice();
var item;

function displayimages() {

  boxtags = document.getElementsByClassName("box");

  for (let index = 0; index < 2; index++) {

    item = array2[index];
    //console.log(item);
    try {


      boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
    } catch (err) {
      // console.log('Exception');
    }
  }
}

displayimages();

#box1 {
  position: absolute;
  top: -10.3vh;
  left: -30.98vw;
  cursor: pointer;
  border: 2px solid #0066CC;
  background-repeat: no-repeat;
  background-size: cover;
}

#box1 p {
  width: 10.0vw;
  height: 10.0vh;
  border-radius: 25%;
}

#box2 {
  position: absolute;
  top: -10.3vh;
  left: -10.98vw;
  cursor: pointer;
  border: 2px solid #0066CC;
  background-repeat: no-repeat;
  background-size: cover;
}

#box2 p {
  width: 10.0vw;
  height: 10.0vh;
  border-radius: 25%;
}

#container {
  white-space: nowrap;
  border: px solid #CC0000;
}

.containerr {
  border: px solid #FF3399;
}

.container2 {
  width: 50.1vw;
  position: fixed;
  top: 10.5vh;
  left: 30.5vw;
}

<div class="container2">
  <div class="containerr">

    <div id="container">
      <div class="box" id="box1">
        <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name1"></p>
      </div>
      <div class="box" id="box2">
        <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name2"></p>
      </div>

    </div>


  </div>
</div>

Answer 1

Вы можете использовать background-size: contain вместо cover для box1 и box2.

Answer 2

Чтобы сделать то, что, я думаю, вы хотите сделать, вы должны использовать background-size: contain; вместо background-size: cover; в #box1 и #box2.

background-size: contain; будет масштабировать изображение так, чтобыкаждое измерение максимально возможно без превышения соответствующего размера контейнера.

background-size: cover; масштабирует изображение до минимального размера, необходимого для того, чтобы его размеры были равны или превышают соответствующие размеры контейнера,Другими словами, он будет масштабирован так, чтобы он был как можно меньше, но при этом полностью покрывал (а в некоторых случаях обрезался) контейнер.

var array2 = [];

var items = [{
    label: 'first',
    url: 'https://i.ibb.co/0DvMRj4/wcheetah.png'
  },
  {
    label: 'second',
    url: 'https://i.ibb.co/gDqm8Dv/wcrow.png'
  },
];
var tempimages = [];
array2 = items.slice();
var item;

function displayimages() {

  boxtags = document.getElementsByClassName("box");

  for (let index = 0; index < 2; index++) {

    item = array2[index];
    //console.log(item);
    try {


      boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
    } catch (err) {
      // console.log('Exception');
    }
  }
}

displayimages();

#box1 {
  position: absolute;
  top: -10.3vh;
  left: -30.98vw;
  cursor: pointer;
  border: 2px solid #0066CC;
  background-repeat: no-repeat;
  background-size: contain;
}

#box1 p {
  width: 10.0vw;
  height: 10.0vh;
  border-radius: 25%;
}

#box2 {
  position: absolute;
  top: -10.3vh;
  left: -10.98vw;
  cursor: pointer;
  border: 2px solid #0066CC;
  background-repeat: no-repeat;
  background-size: contain;
}

#box2 p {
  width: 10.0vw;
  height: 10.0vh;
  border-radius: 25%;
}

#container {
  white-space: nowrap;
  border: px solid #CC0000;
}

.containerr {
  border: px solid #FF3399;
}

.container2 {
  width: 50.1vw;
  position: fixed;
  top: 10.5vh;
  left: 30.5vw;
}

<div class="container2">
  <div class="containerr">

    <div id="container">
      <div class="box" id="box1">
        <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name1"></p>
      </div>
      <div class="box" id="box2">
        <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name2"></p>
      </div>

    </div>


  </div>
</div>