So without further ado, here is an image loaded onto a canvas:
And here is a pixelated version using divify:
divify makes use of the canvas, which, once loaded with an image, can be used to extract the RGBA values for each pixel like so:
In the previous image the 'pixels' were 5 pixels wide. divify lets you specify the pixel width, so we can increase the pixelation factor:
Now we can apply arbitrary CSS styles to the pixel divs:
One interesting thing is that changing the float value from 'left' to 'right' has the effect of flipping the image horizontally. And yes, you can set the pixel length to one. This of course results in a rather large number of divs which need rendering, so if your browser does not choke on this, you'll wind up with a remarkably faithful reproduction of the image.
The code is up on GitHub, and you can try it out below with your own image. Note that if necessary the image will be cropped so the height and width are multiples of the pixel size.