缩放背景图像，分割成多个部分

Question

我在最后几天进行了大量的搜索和测试以及我可以或多或少成功解决的单个问题。但是所有问题在一起我都无法发挥作用。

我的问题：我有一张图片，用Photoshop分割成片。所有这些切片我想作为背景放在我的网站上。应将“完整图片”拉伸并自动缩放到窗口大小。

我想要单个切片的原因：我希望用户能够点击整个图片的一部分，并显示一个未显示的div，并显示其他信息。

昨天我进行了以下测试，将图片分成4部分

x | X

x | X

（图片部分之间没有边框。）

当我的窗口变小时，只有右边的切片被缩放，直到窗口边框到达左边的图片部分。然后左边的照片也缩放了。

所以，总而言之，我想： - 将图片部分放置为背景图像 - 将图像上的链接放到禁用的div上以显示添加。信息 - 按比例缩放所有切片，使整个图片始终适合窗口

我希望我能用可理解的英语来解决我的问题。

Answer 1

如果我理解你是对的，你可以这样做

＆＃13;

＆＃13;

var elems = document.querySelectorAll('.wrapper div');
for (var i = 0; i < elems.length; i++) {
  elems[i].addEventListener('click', function(e) {
    alert(e.target.getAttribute('data-nr'));    
  })
}

＆＃13;

html, body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: 100vh;
}
.wrapper div {
  width: 50%;
  height: 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.wrapper div:nth-child(1) {
  background-image: url(http://lorempixel.com/300/200/animals/1);
}
.wrapper div:nth-child(2) {
  background-image: url(http://lorempixel.com/300/200/animals/2);
}
.wrapper div:nth-child(3) {
  background-image: url(http://lorempixel.com/300/200/animals/3);
}
.wrapper div:nth-child(4) {
  background-image: url(http://lorempixel.com/300/200/animals/4);
}

＆＃13;

<div class="wrapper">

  <div data-nr=1></div>
  <div data-nr=2></div>
  <div data-nr=3></div>
  <div data-nr=4></div>
  
</div>

＆＃13;

＆＃13;

＆＃13;