使一组图像表现为一个块(例如:一起调整大小)

Question

当用户调整窗口大小时(或者只是为了适应不同的屏幕大小)，我试图让几个图像一起调整大小(作为一个块)。

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

1) 主图像是一张地图，它在Z索引上：-1位置：绝对；2) 以下图片是绝对位于地图顶部的河流。这些图像有一个鼠标悬停行为，可以将图像本身替换为另一种颜色，再加上onclick，可以使下一列的表单元格上的文本移动到特定的锚点。

像这样，可以与用户和地图/河流进行交互。

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

下面的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;
}

//地图图像

#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;仍然离左边650像素，即使地图只有300像素宽。

请尝试使用百分比。

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

#river {
top:48.57%;
}

Answer 2

尝试使用媒体查询调整窗口大小以查看布局中断的位置，并使用媒体查询修改所需窗口大小的css

在你的css文件中放入这个

@media only screen and (max-width: 370px)
{
//Desired css goes here
}

上面例子中的css适用于大小>=370 px的窗口

您可以使用不同的最大或最小宽度进行任意数量的查询只放置您正在为id或类更改的规则。任何其他规则将与媒体查询外部定义的规则保持一致

是的，百分比会对你有很大帮助，但可能会带来额外的问题。尝试媒体查询和百分比