Skip to main content
removeu 1667 caracteres do conteúdo
Fonte Link
user31050
  • 440
  • 4
  • 12

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);
$(".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 {
  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: 0px;
  height: 0px;
  float: left;
  
  
}
<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>

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);
$(".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 {
  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: 0px;
  height: 0px;
  float: left;
  
  
}
<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>

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>

removeu 553 caracteres do conteúdo
Fonte Link
user31050
  • 440
  • 4
  • 12

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);
$(".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 {
  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;0px;
  height: 180px;0px;
  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>

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>

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);
$(".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 {
  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: 0px;
  height: 0px;
  float: left;
   
  
}
<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>

removeu 553 caracteres do conteúdo
Fonte Link
user31050
  • 440
  • 4
  • 12
  • No algoritmo para saber o tamanho da imagem em width e height parece não receber o tamanho real da imagem, o que gera um erro de tamanho nas futuras divs geradas.
  • As divs geradas não estão ficando dentro da imagemaparecendo como deveriam.
//Achando o tamanho da imagem
var imgwidthImg = document$("#idteste2").getElementByIdwidth('idteste2'); 
var widthImg = img.clientWidth;
var heightImg = img$("#idteste2").clientHeight;height();

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

var resWidth = parseInt(Math.floor(widthImg / 3);
document.write(resWidth+"<br />");
var resHeight = parseInt(Math.floor(heightImg / 3));
resWidth = 20;
document.write(resHeight+"<brresWidth+" "+resHeight+"<br />");

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


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

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

.box {
    background: #9E9E9E;
    border: black 1px solid;
    width:solid 50px;yellow;
    height: 50px;
    margin: 0 auto;}
    margin-top: 0;
    cursor:.box pointer;{
    displayborder: inline-block;
1px solid black;
  floatwidth: left;
}

.row {180px;
    displayheight: block;180px;
    float: left;
    widthz-index:100%; 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>
  • No algoritmo para saber o tamanho da imagem em width e height parece não receber o tamanho real da imagem, o que gera um erro de tamanho nas futuras divs geradas.
  • As divs geradas não estão ficando dentro da imagem como deveriam.
//Achando o tamanho da imagem
var img = document.getElementById('idteste2'); 
var widthImg = img.clientWidth;
var heightImg = img.clientHeight;
document.write(widthImg+" "+heightImg+"<br />");

var resWidth = Math.floor(widthImg / 3);
document.write(resWidth+"<br />");
var resHeight = Math.floor(heightImg / 3);
resWidth = 20;
document.write(resHeight+"<br />");

//Tentando inserir as divs
  for(var i = 0; i < 3; i++)
  {
     document.write(i+"= i <br />");
      for(var j = 0; j < 3; j++)
      {
          document.write(j+"= j <br />");
          $("#idteste2").append("<div class='box'></div>");
          $(".box").css("width",resWidth);
          $(".box").css("height",resHeight);
      };
  };
#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);
}

.box {
    background: #9E9E9E;
    border: black 1px solid;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    margin-top: 0;
    cursor: pointer;
    display: inline-block;
    float: left;
}

.row {
    display: block;
    float:left;
    width:100%;
}
<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>
  • 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>
Update
Fonte Link
user31050
  • 440
  • 4
  • 12
Carregando
Fonte Link
user31050
  • 440
  • 4
  • 12
Carregando