html - 使图像组表现为一个 block (例如 :resize together)!

Question

当用户调整窗口大小时(或只是为了适应不同的屏幕尺寸)，我正在尝试使几个图像一起调整大小(作为一个 block )。

所有图像都在表格中，row1/column1= map 加上河流图像。 row1/column2= 河流的描述，可以通过点击 map 上的每条河流来查看。

1) 主图是一张 map ，它的 Z-Index:-1 Position:absolute; 2)下图是绝对位于 map 上方的河流。这些图像具有鼠标悬停行为，可以将图像与其本身交换另一种颜色，加上使下一列表格单元格上的文本移动到特定 anchor 的 onclick。

像这样与用户和 map /河流进行交互。

问题是当屏幕变小时， map 图像会相应地调整大小，但河流图像会保持不变，一切都会变得一团糟。

下面是一些引用 map 图像和一张河流图像的 html 代码(所有其他只需重复)

“HTML”

<div class="container-fluid" id="page-bg">
<table width="100%" border="0" cellpadding="1" cellspacing="1"   id="interactive">
<tbody>
<tr>
<td width="100%">
<img src="../images/backgrounds/01_FFAlgarve_Background.png" width="100%"  height="1050" alt="" id="intmap">
<a href="#a3" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('funcho','','../images/buttons/funcho1.png',1)">
<img src="../images/buttons/funcho.png" alt="" width="100%" height="auto" id="funcho" title="Funcho Dam">

“CSS”

//表格

#interactive{
 position:relative;
 z-index:-1;
}

// map 图片

#intmap{
 position:absolute; 
 z-index:-1;
 top:0px;
 left:0px;
 max-width:1750px;
 }

//河图

#funcho{
 position:absolute; 
 z-index:2;
 top:510px;
 left:650px;
 max-width:222px;
 max-height:132px;
}

非常感谢我可能得到的所有帮助；) 亲切的问候 MSV

Answer 1

好吧，你为你的河流使用了一个固定值，left:650px; 距离左边仍然是 650px，即使 map 只有 300px 宽。

尝试使用百分比。

//编辑 所以你的 map 是 1050 像素高，原来你的河流是从顶部 510，所以 100(510/1050) = 48.57

#river {
top:48.57%;
}