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>