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％时，图像会相应缩小。

响应定位图像

1 个答案: