Skip to content

Instantly share code, notes, and snippets.

@apaatsio
Created October 31, 2016 15:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save apaatsio/9ede29e3795c03e16fe5156366596935 to your computer and use it in GitHub Desktop.
Save apaatsio/9ede29e3795c03e16fe5156366596935 to your computer and use it in GitHub Desktop.
JavaScript snippet to show random kitten image in console
(function(url) {
// Create a new `Image` instance
var image = new Image();
image.onload = function() {
// Inside here we already have the dimensions of the loaded image
var style = [
// Hacky way of forcing image's viewport using `font-size` and `line-height`
'font-size: 1px;',
'line-height: ' + this.height + 'px;',
// Hacky way of forcing a middle/center anchor point for the image
'padding: ' + this.height * .5 + 'px ' + this.width * .5 + 'px;',
// Set image dimensions
'background-size: ' + this.width + 'px ' + this.height + 'px;',
// Set image URL
'background: url('+ url +');'
].join(' ');
console.log('%c', style);
};
// Actually loads the image
image.src = url;
})('http://placekitten.com/' + (200 + Math.round(Math.random()*200)) + '/' + (200 + Math.round(Math.random()*200)));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment