Question

我正在尝试在包含一组图像的框架内创建一个图库。画廊中的第一个图像我正在尝试使用具有窗口高度的动态图像，以及不会改变图像宽高比的相应宽度。我发现我可以用这段代码做到这一点：

<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>

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

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

我尝试过各种各样的方法，但是我很困惑，任何人都可以帮忙吗？最简单的方法是获取窗口高度然后乘以固定量（纵横比），然后将其他图像偏移该量，但我无法弄清楚如何做到这一点。

我很感激任何帮助。

Answer 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>

混淆动态和问题的问题静态图像

1 个答案: