如何使backgroundImage完全显示在框中

Question

我有两个ID为box1和box2的盒子，我将图像从数组items加载到盒子中。

使用for循环将每个项目的

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;和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>

Answer 2

对于background-size: contain和cover，您可以使用box1代替box2。