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.
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.
<h1>Fill Murray <em>http://www.fillmurray.com/</em></h1> | |
<div id="murray" class="grid"> | |
</div> |
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);*/ | |
@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; | |
} | |
} |