Question

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

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

1）主图像是一个地图，它在Z-Index上：-1位置：绝对; 2）以下图像是完全位于地图顶部的河流。这些图像具有鼠标悬停行为，可以将图像与其自身交换，但另一种颜色加上onclick，使得下一列的表格单元格上的文本移动到特定锚点。

这就是与用户和地图/河流的互动。

事情是，当屏幕较小时，地图图像会相应地调整大小，但是河流图像会保持不变并且所有图像都会混乱。

下面是一些html代码，引用地图图像和一个河图（所有其他只是重复）

＆＃34; HTML＆＃34;

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

＆＃34; CSS＆＃34;

//表

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

//地图图片

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

// river image

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

非常感谢我提供的所有帮助;）亲切的问候 MSV

Answer 1

嗯，你的河流使用固定值，val publishDocker = ReleaseStep(action = st => { // 1. get release version from sbt-release // 2. add release version to docker image tag // 3. push docker image to aws ecr }) releaseProcess := Seq[ReleaseStep]( checkSnapshotDependencies, inquireVersions, runTest, setReleaseVersion, commitReleaseVersion, tagRelease, publishDocker, setNextVersion, commitNextVersion, pushChanges )距离左边仍然是650px，即使地图只有300px宽。

请尝试使用百分比。

//编辑所以你的地图高1050像素，原来你的河流从顶部开始是510，所以left:650px;

100(510/1050) = 48.57

Answer 2

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

你的css文件中的

放了这个

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

上面示例中的css适用于窗口大小＆gt; = 370 px

您可以根据需要使用不同的最大或最小宽度进行任意数量的查询只将您要更改的规则用于id或class。任何其他规则将保持与媒体查询外部定义的相同

是的，百分比会对你有很大帮助，但可能会导致额外的问题，试验媒体查询和百分比

使图像组表现为块（例如：一起调整大小）！

2 个答案: