Bill Murray Placeholder

Bill-Murray-Placeholder-.markdown

Bill Murray Placeholder

dont overthink it grid by Chris Coyier http://codepen.io/chriscoyier/pen/eGcLw

and ill murray placeholder images http://www.fillmurray.com/

A Pen by digital-doodle on CodePen.

License.

index.html

<h1>Fill Murray <em>http://www.fillmurray.com/</em></h1>

<div id="murray" class="grid">
 
  </div>

script.js

var images =[
  'http://fillmurray.com/200/200',
  'http://fillmurray.com/g/400/400',
  'http://fillmurray.com/g/600/600',
  'http://fillmurray.com/g/700/700',
  'http://fillmurray.com/g/800/800',
  'http://fillmurray.com/g/900/900',
  'http://fillmurray.com/g/1200/1200',
  'http://fillmurray.com/g/500/500'
];



for( i=0; i < images.length; i++ ){
  images[i] = '<div class="col-1-4"><figure><img src="'+ images[i] + '"/></figure></div>';
}


$('#murray').html(images);


/*console.log(images);*/
    

style.scss

@import "bourbon";
*{
  outline: 1px solid red;
  background-color: rgba(red, .15);
}
figure{
  /* max-height: 200px; */
  overflow: hidden; 
  position: relative;
  padding: 0.5em;
  margin: 0;
  img{
     /* corrects inline gap in enclosing div */
  display: block;
  max-width: 100%;
    width: 100%;
    overflow: hidden;
  /* just in case, to force correct aspect ratio */
  height: auto !important;
  width: auto\9; /* ie8+9 */
  /* lt ie8 */
  -ms-interpolation-mode: bicubic; 
  }
}