html - 如何让标记的行为也为 "responsive"?

标签 html css marker

最近我把一些测雨雷达的图片拼凑了起来, 允许立即查看是否要下雨,是或否。

当缩小 URL 窗口时,两张图片(并排放置)也会缩小。到目前为止,一切都很好。例如,click here ...

在这两张照片中,都可以看到一个红色的蜜蜂标记,在本例中,它显示了德国汉堡市附近一个小村庄的确切位置。

但是,当我缩小 URL 窗口时,两个标记(显然)开始移动到其他位置,至少:它们的新位置不再对应于汉堡附近的那个小村庄。

当缩小 URL 窗口时,我正在努力如何将两个标记保持在正确的位置。任何解决方法的建议将不胜感激。

请在下面找到 CSS/HTML 脚本:

<style type="text/css">

.table1 { 
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-width: 6px; 
    border-style: double;
    font-family: verdana;
    font-style: normal;
    font-weight: bold;
    font-size: 120%;
    text-align: center;
}
.td1 { 
    border-width: 6px; 
    border-style: double;
    padding: 5px;
}
.img {
    height: auto;
    width: 100%;
}

#outer-left {
    position:relative;
    z-index:0;
}
#outer-right {
    position:relative;
    z-index:0;
}
.inner-left {
    position:absolute;
    z-index:1;
    bottom: 192px;
    right: 115px;
}
.inner-right {
    position:absolute;
    z-index:1;
    bottom: 250px;
    right: 161px;
}
</style>


<table class="table1">
<tr>
<td class="td1">Niederschlagsradar West-Europa</td>
<td class="td1">Niederschlagsradar Deutschland</td>
</tr>

<tr>
<td id="outer-left" class="td1">
<img src="http://api.buienradar.nl/image/1.0/RadarMapEU?" height="auto" width="100%" >
<div class="inner-left"><img src="http://mirpir.eu/mark2.gif" alt="Rellingen" /></div>
</td>

<td id="outer-right" class="td1">
<img src="http://www.niederschlagsradar.de/image.ashx?type=loop1stunde&jaar=&regio=homepage&tijdid=201112050910&time=" style="float: left; filter: alpha(opacity=90); -moz-opacity: .9; opacity: .9; border-width: 0px; height="auto" width="100% " />
<div class="inner-right"><img src="http://mirpir.eu/mark2.gif" alt="Rellingen" /></div>
</td>

</tr>
</table>
<br><br>

最佳答案

以相对百分比单位设置标记位置,以便在您调整容器大小时它们保持相同位置。

.inner-left {
position:absolute;
z-index:1;
top: 34%;
left: 65%;
}

根据需要调整

关于html - 如何让标记的行为也为 "responsive"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48155714/

相关文章:

javascript - 值不能从 ReadableNativeMap 转换为 double

html - Twitter Bootstrap 定制和下载

html - 在设计 Web 应用程序时应该使用哪种技术 - HTML5 + CSS3 或 HTML4 + CSS2?

android - 发布未知位图引用 - 在 android 中设置标记

javascript - Jquery 查找具有相同类的多个链接 href 并根据获取页面更改每个链接的名称

具有可变宽度、固定宽度和剩余宽度的 HTML 表格

python - 当我用符号在轨迹中绘制标记时,它没有显示

css - 如何仅调整响应图像的高度?

javascript - polymer "DOM-Bind"更新绑定(bind)

css - Bootstrap less - 覆盖整个类