缩放背景图像，分割成多个部分(Scaling background image which is splitted in multiple parts)

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

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

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

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

x | X

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

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

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

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

I've searched and tested a lot the last days and single problems I could solve more or less with success. But all problems together I can't get to work.

My problem: I have an image, which is splitted with Photoshop into slices. All these slices I would like to put on my website as background. The "complete picture" should be stretched and scaled automatically to the window size.

The reason why I want single slices: I want the user to be able to click on a part of the whole picture and a not shown div with additional information shows up.

Yesterday I had the following test with a picture sliced into 4 parts

x | x

(There is no border between the picture parts.)

As my window got smaller only the right slices got scaled until the window border reached the left picture parts. Then the left pictures got scaled, too.

So, all in all, I would like to: - place picture parts as background images - put a link on the images to disabled divs to show add. information - proportionally scale all slices together, so that the whole picture always fits the window

I hope I could desribe my problem in understandable English.

最满意答案

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

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> 
  
 
If I understand you correct, you could do like this 
 
 
  
  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>

更多推荐