Question

我试图达到以下效果：

让地图图像填满浏览器的整个宽度。
将形状为圆圈且位于图像某些部分的div设为
让div继续位于地图的正确位置，与浏览器大小无关。

我的背景图片设置为使用以下css覆盖我的屏幕：

#map {
  margin: 0 auto;
  background: url('http://imgur.com/iqR0WZN.png') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}

位于图像顶部的div具有以下css：

.circle {
  border-radius: 50%;
  width: 25px;
  height: 25px;  
}

#dot1{
  position:absolute;
  top: 35%;
  left: 62%;
  background: red;
}

#dot2{
  position:absolute;
  top: 50%;
  left: 25%;
  background: red;
}

定义这些元素的Html：

<div id=map>
 <div id="dot1" class="circle"></div>
    <div id="dot2" class="circle"></div>
</div>

这是一个演示我的意思的小提琴：http://jsfiddle.net/fCrK6/

注意：圆圈是动态的 - 它们的颜色和大小会不断变化，具体取决于向我提供信息的api调用。这就是为什么它们不应该简单地固定在背景图像上。我有javascript运行这些更改。

如何使这些点始终位于与图像相关的位置，而不是浏览器大小？理想情况下，我希望每个圆圈都位于地图图像中指示的Lands End Stage和Twin Peak Stage之上。

我试图用一堆媒体查询来解决这个问题，但这是很多媒体查询，似乎不是最好的解决方案。

Answer 1

这是一个有效的解决方案：http://jsfiddle.net/xue4j/。注意，这个实现首先是作为概念证明完成的。如何将它应用于您的应用程序完全取决于您。

P.S。有趣的问题。

HTML：

<div id = "map">
    <img src = "http://imgur.com/iqR0WZN.png" />
    <div class = "screen"></div>
</div>

样式：

* {
    margin: 0;
    padding: 0;
}

html, body, #map {
    height: 100%;
}

#map {
    overflow: hidden;
    position: relative;
}

#map > .screen,
#map > img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

#map > .screen:before, 
#map > .screen:after {
    content: "";
    position: absolute;
    width: 2.5vmax;
    height: 2.5vmax;
    border-radius: 100%;
    background-color: red;
    top: 52%;
    left: 26%;
}

#map > .screen:after {
    left: auto;
    top: 38%;
    right: 27%;
}

@media screen and (min-aspect-ratio: 2842/2383) {
    #map > img {
        width: 100vw;
    }

    #map > .screen {
        width: 100vw;
        height: 83.85vw;
    }
}

@media screen and (max-aspect-ratio: 2842/2383) {
    #map > img {
        height: 100vh;
    }

    #map > .screen {
        height: 100vh;
        width: 119.26vh;
}

在图像部分顶部修复div的最佳方法

1 个答案: