混合动态和静态图像时遇到问题答案

【问题标题】：Having issues with mixing dynamic & static images混合动态和静态图像时遇到问题
【发布时间】：2012-04-18 05:17:04
【问题描述】：

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

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

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

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

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

如果有任何帮助，我将不胜感激。

【问题讨论】：

标签： html image-scaling

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

【讨论】：

稍作调整即可。我不得不将 div 标签中的“宽度”更改为一个值，即 7000px 我唯一的问题是我想将图像垂直居中。有什么帮助吗？