html - 缩放分成多个部分的背景图像

Question

最近几天我搜索和测试了很多，我可以或多或少地成功解决单个问题。但所有问题加在一起我无法开始工作。

我的问题:我有一张图片，它被 Photoshop 分成了多个切片。我想将所有这些切片作为背景放在我的网站上。 “完整图片”应自动拉伸(stretch)和缩放到窗口大小。

我想要单个切片的原因:我希望用户能够点击整个图片的一部分，然后显示一个未显示的带有附加信息的 div。

昨天我用一张分成 4 部分的图片进行了以下测试

x | x

x | x

(图片部分之间没有边框。)

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

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

我希望我能用易于理解的英语描述我的问题。

Answer 1

如果我理解正确的话，你可以这样做

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'));    
  })
}

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);
}

<div class="wrapper">

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