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>