How to split an image (which can have different sizes) into 3 x 3 using javascript?

Question

Criterion:
- Split the original image into 9 Ivs (3 x 3) of equal size.
- Each (one of the 9) div with the respective partial mirror image (of the original image) of its respective position.

#idteste.image:before {
  content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/CitroenC-Metisse21.JPG/400px-CitroenC-Metisse21.JPG);
}



#idteste2.image:before {
  content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Citroen_GT.JPG/200px-Citroen_GT.JPG);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="idteste" class="image"></div>
<br />
<div id="idteste2" class="image"></div>

Answer 1

I found a way to split an image using javascript. To do this you should have some knowledge in canvas. https://stackoverflow.com/questions/21933043/split-an-image-using-javascript

Alternatively, there is a way to get to the goal using css. To do this first you have to idealize a 3x3 matrix:

CSS

    .celula-img {
        /*Atenção  ao redimensionar a imagem: O tamanho da célula deve ser proporcional a imagem do background. Caso contrario, a imagem aparecera distorcida*/
        width: 100px;
        height: 75px;
  
        background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/CitroenC-Metisse21.JPG/400px-CitroenC-Metisse21.JPG);
        float: left;
    }

    .celula-img.img-11{
        clear:both;/*quebra linhas*/
        background-position: 0px 0px;
     
    }
    .celula-img.img-12{
        background-position: 33.333% 0px;
    }
    .celula-img.img-13 {
        background-position: 66.666% 0px;
    }

    .celula-img.img-21{
        clear:both;/*quebra linhas*/
        background-position: 0px 33.333%;
    }
    .celula-img.img-22{
        background-position: 33.333% 33.333%;
    }
    .celula-img.img-23 {
        background-position: 66.666% 33.333%;
    }

    .celula-img.img-31{
        clear:both;/*quebra linhas*/
        background-position: 0px 66.666%;
    }
    .celula-img.img-32{
        background-position: 33.333% 66.666%;
    }
    .celula-img.img-33 {
        background-position: 66.666% 66.666%;

    }

<div>
  <div class="celula-img img-11"></div>
  <div class="celula-img img-12"></div>
  <div class="celula-img img-13"></div>

  <div class="celula-img img-21"></div>
  <div class="celula-img img-22"></div>
  <div class="celula-img img-23"></div>

  <div class="celula-img img-31"></div>
  <div class="celula-img img-32"></div>
  <div class="celula-img img-33"></div>
</div>

Answer 2

 var tmpImg = new Image();
 tmpImg.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/CitroenC-Metisse21.JPG/400px-CitroenC-Metisse21.JPG";
 $(tmpImg).one('load', function() {
   widthImg = tmpImg.width;
   heightImg = tmpImg.height;
   //alert(widthImg + "x" + heightImg);
   $("#idteste2").css("width", widthImg);
   $("#idteste2").css("height", heightImg);

   var resWidth = parseInt(Math.floor(widthImg / 3));
   var resHeight = parseInt(Math.floor(heightImg / 3));
   resWidth = resWidth - 1.5;
   resHeight = resHeight - 2;

   $("p").html(resWidth + " " + resHeight);
   link = "https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/CitroenC-Metisse21.JPG/400px-CitroenC-Metisse21.JPG";

   //Inserir as divs
   valuePxl = 0;
   count = 0;
   for (var i = 0; i < 3; i++) {
     for (var j = 0; j < 3; j++) {
       if (count == 0) {
         $("#idteste2").append("<div class=\"box box" + count + "\"></div>");
         $(".box" + count).css("background", "url('" + link + "')");
         $(".box" + count).css("margin-left", "-1px");
       };

       if (count == 1) {
         $("#idteste2").append("<div class=\"box box" + count + "\"></div>");
         $(".box" + count).css("margin-left", "-1px");
         $(".box" + count).css("background", "url('" + link + "')");
         valuePxl = ((parseInt(resWidth)) * 2);
         $(".box" + count).css("background-position", valuePxl + "px 0px");
       };

       if (count == 2) {
         $("#idteste2").append("<div class=\"box box" + count + "\"></div>");
         $(".box" + count).css("margin-left", "-1px");
         $(".box" + count).css("background", "url('" + link + "')");
         valuePxl = resWidth;
         $(".box" + count).css("background-position", valuePxl + "px 0px");
       };

       if (count == 3) {
         $("#idteste2").append("<div class=\"box box" + count + "\"></div>");
         $(".box" + count).css({
           "margin-left": "-1px",
           "margin-top": "-1px"
         });
         $(".box" + count).css("background", "url('" + link + "')");
         valuePxl = resHeight * 2;
         $(".box" + count).css("background-position", "0px " + valuePxl + "px");
       };

       if (count == 4) {
         $("#idteste2").append("<div class=\"box box" + count + "\"></div>");
         $(".box" + count).css({
           "margin-left": "-1px",
           "margin-top": "-1px"
         });
         $(".box" + count).css("background", "url('" + link + "')");
         valuePxlWidth = ((parseInt(resWidth)) * 2);
         valuePxlWeight = ((parseInt(resHeight)) * 2);
         $(".box" + count).css("background-position", valuePxlWidth + "px " + valuePxlWeight + "px");
       };

       if (count == 5) {
         $("#idteste2").append("<div class=\"box box" + count + "\"></div>");
         $(".box" + count).css({
           "margin-left": "-1px",
           "margin-top": "-1px"
         });
         $(".box" + count).css("background", "url('" + link + "')");
         valuePxl = resWidth;
         valuePxlWeight = ((parseInt(resHeight)) * 2);
         $(".box" + count).css("background-position", valuePxl + "px " + valuePxlWeight + "px");
       };

       if (count == 6) {
         $("#idteste2").append("<div class=\"box box" + count + "\"></div>");
         $(".box" + count).css({
           "margin-left": "-1px",
           "margin-top": "-1px"
         });
         $(".box" + count).css("background", "url('" + link + "')");
         valuePxlWidth = ((parseInt(resWidth)) * 3);
         valuePxlWeight = Math.floor((parseInt(resHeight)) * 1);
         console.log(resHeight+" "+valuePxlWeight);
         $(".box" + count).css("background-position", 0 + "px " + valuePxlWeight + "px");
       };

       if (count == 7) {
       $("#idteste2").append("<div class=\"box box" + count + "\"></div>");
         $(".box" + count).css({
           "margin-left": "-1px",
           "margin-top": "-1px"
         });
         $(".box" + count).css("background", "url('" + link + "')");
         valuePxlWidth = ((parseInt(resWidth)) * 2);
         valuePxlWeight = ((parseInt(resHeight)) * 1);
         $(".box" + count).css("background-position", valuePxlWidth + "px " + valuePxlWeight + "px");
       };

       if (count == 8) {
         $("#idteste2").append("<div class=\"box box" + count + "\"></div>");
         $(".box" + count).css({
           "margin-left": "-1px",
           "margin-top": "-1px"
         });
         $(".box" + count).css("background", "url('" + link + "')");
         valuePxl = resWidth;
         valuePxlWeight = ((parseInt(resHeight)) * 1);
         $(".box" + count).css("background-position", valuePxl + "px " + valuePxlWeight + "px");
       };


       count++;
     };
   };


   $(".box").css("width", resWidth);
   $(".box").css("height", resHeight);
   $(".box").css("border", "1px solid black");


 });

#idteste1 {
  content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/CitroenC-Metisse21.JPG/400px-CitroenC-Metisse21.JPG);
  border: 1px solid yellow;
}


/**
#idteste2 {
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Citroen_GT.JPG/200px-Citroen_GT.JPG);
  border: 1px solid yellow;
}
**/

/**
#idteste2 {
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/CitroenC-Metisse21.JPG/400px-CitroenC-Metisse21.JPG);
  border: 1px solid yellow;
}
**/

/**
.box0 {
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Citroen_GT.JPG/200px-Citroen_GT.JPG);
}
**/

.box1 {
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/CitroenC-Metisse21.JPG/400px-CitroenC-Metisse21.JPG);
}

.box {
  border: 1px solid black;
  width: 0px;
  height: 0px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<br />

<div id="idteste2" class="image">
</div>
<p>
</p>
</p>