Skip to main content
3 de 5
removeu 553 caracteres do conteúdo
user31050
  • 440
  • 4
  • 12

Como dividir uma imagem (que pode ter tamanhos diferentes) em 3 x 3 usando javascript?

Critério:

  • Dividir a imagem original em 9 divs (3 x 3) de tamanhos iguais.
  • Cada (uma das 9) div com a respectiva imagem espelho parcial (da imagem original) da sua respectiva posição.

#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>

Update

  • As divs geradas não estão aparecendo como deveriam.

//Achando o tamanho da imagem
var widthImg = $("#idteste2").width();
var heightImg = $("#idteste2").height();

document.write(widthImg+" "+heightImg+"<br />");

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

document.write(resWidth+" "+resHeight+"<br />");

//Inserir as divs
for (var i = 0; i < 3; i++) {
  for (var j = 0; j < 3; j++) {
    $("#idteste2").append("<div class='box'></div>");
  };
};


$(".box").css("width", resWidth);
$(".box").css("height", resHeight);
#idteste1 {
  content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/CitroenC-Metisse21.JPG/400px-CitroenC-Metisse21.JPG);
   border: 1px solid yellow;
}

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

.box {
  border: 1px solid black;
  width: 180px;
  height: 180px;
  float: left;
  z-index: 2;
}
<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>

user31050
  • 440
  • 4
  • 12