1

我正在尝试在具有一组图像的框架内创建一个画廊。画廊中的第一张图像我试图拥有一个动态图像，它具有窗口的高度和不改变图像纵横比的对应宽度。我发现我可以用这段代码做到这一点：

<div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1">
<img src="IMAGENAME.jpg" height="100%"/></div>

接下来我想在这个具有固定大小的动态大小的图像的右侧添加一个图像，然后我想在它的右侧添加另一个具有固定大小的图像等。

由于窗口显示在不同的屏幕上，我希望静态图像始终触及动态图像的边界。

我已经尝试了各种方法来做到这一点，但我几乎被卡住了，有人可以帮忙吗？最简单的方法是获取窗口高度，然后将其乘以固定数量（纵横比），然后将其他图像偏移该数量，但我不知道该怎么做。

我会很感激任何帮助。

4

1 回答 1

1

您可以使用以下代码将所有图像浮动到动态图像旁边：

<html>
<head>
<style type="text/css">
.thumbnail 
{
    float:left;
}
</style>
</head>

<body>
<div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1">
    <img class="thumbnail" src="IMAGENAME.jpg" height="100%">
    <img class="thumbnail" src="img1.jpg">
    <img class="thumbnail" src="img2.jpg">
    <img class="thumbnail" src="img3.jpg">
    <img class="thumbnail" src="img4.jpg">
</div>
</body>
</html>
于 2012-04-18T06:38:35.790 回答