Отзывчивое позиционированное изображение

Question

Мне было интересно, как я могу сделать серию позиционированных изображений реагировать на размер окна? Я не совсем уверен, как будто сами изображения должны быть относительными и иметь обертку страницы абсолютно или наоборот. Я играл на jsfiddle, но ничего не работает. Для справки, следующий веб-сайт выполняет эффект, я хотел бы создать - он полностью отвечает ширине окна: http://www.index-std.com/ressources/projets/guillaume_lorieux.html

Я создал jsfiddle здесь: http://jsfiddle.net/kenhimself/uz41Leno/

Большое спасибо заранее!

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> 

Answer 1

Я updated your fiddle. По сути, вам нужно избавиться от объявлений статического размера и сделать более относительный/динамический размер, например, max-width вместо width.

Если вы хотите сделать больше вещей, как то, что делает ваш примерный сайт, т. Е. Все изображения перемещаются после изменения размера, это скорее решение, ориентированное на javascript.

EDIT

В данном примере, автор заворачивает его изображения в DIV и устанавливает ширину и положение в процентах от емкости. Когда контейнер сжимается, также обертка. Если изображение установлено на уровне 100%, изображение будет уменьшаться соответственно.