I'm trying to figure out how to make a series of positioned images adjust to the window's dimensions. Should the images be relative and the page wrap absolute, or vice versa? I've been experimenting on jsfiddle but can't seem to get it right. The website linked below achieves the effect I want, where the images respond completely to the window's width:
Here's my jsfiddle setup: http://jsfiddle.net/kenhimself/uz41Leno/
Thank you in advance!
CSS:
.a { top:0; left:20%; height:300px; }
.b { top:150px; right:0; height:250px; }
.c { top:400px; left:0; height:200px; }
.d { top:600px; left:50%; height:100px; }
.e { top:900px; right:20%; height:300px; }
.f { top:800px; left:10%; height:200px; }
.g { top:1300px; left:0; height:300px; }
.a, .b, .c, .d, .e, .f, .g { width:auto; }
div.page { }
img { width:100%; height:100%; position:absolute; }
figure.thumbnail { width:100%; height:100%; position:relative; }
html, body { margin:0; padding:0; width:100%; height:100%; }
HTML:
<div class="page">
<figure class="thumbnail">
<img class="a" src="http://i62.tinypic.com/fxqe6g.jpg"/>
<img class="b" src="http://i62.tinypic.com/2wgeutv.jpg"/>
<img class="c" src="http://i61.tinypic.com/dptspl.jpg"/>
<img class="d" src="http://i60.tinypic.com/2dv8mj6.jpg"/>
<img class="e" src="http://i60.tinypic.com/208u109.jpg"/>
<img class="f" src="http://i57.tinypic.com/2qdpvly.jpg"/>
<img class="g" src="http://i58.tinypic.com/2u4ljmd.jpg"/>
</figure>
</div>