响应式定位图像

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 的解决方案。

编辑

在给定的示例中，作者将他的图像包装在一个 div 中，并将宽度和位置设置为容器的百分比。当容器收缩时，包装器也会收缩。图片设置为100%，图片会相应缩小。