html - 如何让背景图片完全显示在框内

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>