How to break an image into 9 small ones (sort of puzzle pieces)

问题

So, I tried creating a little puzzle game, which at the moment looks something like this

The top is the puzzle where you can put pieces that are chosen from a table with 1 row (scrollable) from the bottom of the page

Problem is those are 9 individual images cut from the original one.

I want to have only one image (the big one) and have them put into the bottom table in a similar manner to what's in the picture above in this post.

For simplicity sake, assume every table cell is 206px width 124px height, so the big picture is 618px width and 372px height (because that's the size of that random image I found online)

I've set an id to each td from the bottom table and tried using css sprite but to no avail.

I'm pretty sure I have to use sprite tho, I just can't seem to make it work. Plus, when I use background: url()... it automatically resizes the cells even tho they have a fixed size.

Thanks in advance

回答1:

Use background-position

Updated: Thanks to @GCyrillus comment (and code sample), it is now scalable)

html, body {
  margin: 0;
}
.puzzle {
  width: 100vh;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.puzzle > div {
  width: 33.333%;
  height: 33.333%;
  background: red;
  border: 1px solid white;
  box-sizing: border-box;
  background: url(http://lorempixel.com/600/600/nature/1/) no-repeat;
  background-size: 300%;
}
.puzzle > div[data-piece1] {
  background-position: 0 0;
}
.puzzle > div[data-piece2] {
  background-position: 50% 0;
}
.puzzle > div[data-piece3] {
  background-position: 100% 0;
}

.puzzle > div[data-piece4] {
  background-position: 0 50%;
}
.puzzle > div[data-piece5] {
  background-position: 50% 50%;
}
.puzzle > div[data-piece6] {
  background-position: 100% 50%;
}

.puzzle > div[data-piece7] {
  background-position: 0 100%;
}
.puzzle > div[data-piece8] {
  background-position: 50% 100%;
}
.puzzle > div[data-piece9] {
  background-position: 100% 100%;
}

<div class="puzzle">
  <div data-piece1></div>
  <div data-piece2></div>
  <div data-piece3></div>
  <div data-piece4></div>
  <div data-piece5></div>
  <div data-piece6></div>
  <div data-piece7></div>
  <div data-piece8></div>
  <div data-piece9></div>
</div>

Scrambled

html, body {
  margin: 0;
}
.puzzle {
  width: 100vh;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.puzzle > div {
  width: 33.333%;
  height: 33.333%;
  background: red;
  border: 1px solid white;
  box-sizing: border-box;
  background: url(http://lorempixel.com/600/600/nature/1/) no-repeat;
  background-size: 300%;
}
.puzzle > div[data-piece1] {
  background-position: 0 0;
}
.puzzle > div[data-piece2] {
  background-position: 50% 0;
}
.puzzle > div[data-piece3] {
  background-position: 100% 0;
}

.puzzle > div[data-piece4] {
  background-position: 0 50%;
}
.puzzle > div[data-piece5] {
  background-position: 50% 50%;
}
.puzzle > div[data-piece6] {
  background-position: 100% 50%;
}

.puzzle > div[data-piece7] {
  background-position: 0 100%;
}
.puzzle > div[data-piece8] {
  background-position: 50% 100%;
}
.puzzle > div[data-piece9] {
  background-position: 100% 100%;
}

<div class="puzzle">
  <div data-piece1></div>
  <div data-piece4></div>
  <div data-piece6></div>
  <div data-piece5></div>
  <div data-piece7></div>
  <div data-piece9></div>
  <div data-piece3></div>
  <div data-piece8></div>
  <div data-piece2></div>
</div>

回答2:

Based on the size of source image (as whole) you can use javascript to calculate top and left point of each piece. Then allocate fixed size piece divs and set same (source) background image to each of them with different offset like this:

.piece-1 {
   background-image: url("...");
   background-position: right <CALCULATED RIGHT>px top <CALCULATED TOP>px;
}

来源：https://stackoverflow.com/questions/43322063/how-to-break-an-image-into-9-small-ones-sort-of-puzzle-pieces

标签

javascript

html

css

html5

sprite