绝对位置流体父项内的子Div

Question

我试图将一个指针放在一个始终位于div父级的同一位置的地图上.这是小提琴 - https://jsfiddle.net/mfgdp3j3/

这个想法是让图钉/浏览器的尺寸始终保持在同一位置,所以如果浏览器是1000px = pin相同的点,就像地图是350px一样(相同的点我的意思是图像上的位置).

快速代码:

<div id="main_container">
    <div id="map_container">
        <img id="map_image" src="https://familysearch.org/learn/wiki/en/images/0/06/Illinois-county-map.gif">
        <img id="pin_it" src="https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Ball-Chartreuse.png">
    </div>
</div>

*{margin:0;padding:0}
html{position:relative;}
#main_container {max-width:1000px;}
#map_container {width:100%; position:relative;padding:0; margin:0}
#map_image {width:100%; padding:0; margin:0}
#pin_it{position:absolute; top:10%; left:10%}

Answer 1

1. 如果您想保持图标的宽度不变，即使在较小的屏幕上。

您可以使用transform:translate(-50%,-100%)和left百分比top值来调整图标的位置。

小提琴： https: //jsfiddle.net/mfgdp3j3/14/

2. 如果您希望图标根据屏幕尺寸调整大小。

min-width另外，max-width如果您在调整大小时感觉图标尺寸太大/太小，您可以设置一个。

小提琴： https: //jsfiddle.net/0yozs4tr/

3.如果你想让图标随着图片一起调整大小

以百分比形式设置图标的宽度（例如 24%）。在这种情况下，图标在较小的屏幕尺寸中可能看起来太小。

小提琴： https: //jsfiddle.net/mfgdp3j3/18/