JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<div id="wrapper">

</div>

CSS

#wrapper {
  display:flex;
  flex-wrap:wrap;
}
.splitImg {
  padding: 1px;
  background-clip: content-box;
  background-repeat: no-repeat;
}

JavaScript

var img = new Image();
var width;
var height;
var length = 30;
var ylength = 30;
img.src = 'http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg';
img.onload = function() {
	width = this.width;
  height = this.height;
 	for (var j = 0; j < length; j++){
  	for (var i = 0; i < length; i++){
  		var left = (-1 * width/length * i).toString() +"px";
   		var top = (-1 * height/ylength * j).toString() +"px";
   		var element = jQuery('<div/>', {
    		id: i + ""+j,
    		class: "splitImg",
    		css: {
        	"width" : Math.floor(width/length),
        	"height":Math.floor(height/ylength),
          "background-position": left  + " " +  top,
          "background-image" : 'url(' + img.src + ')'
    		}
			})
			element.appendTo('#wrapper');
    	$("#wrapper").width(width + (length *2))
  	}
	}
}