Absolute Baby Div Position Inside Fluid Parent

Question

I am trying to put a pointer on a map that will always be in the same place on the div's parent. Here is the fiddle - https://jsfiddle.net/mfgdp3j3/

The idea is to always keep the pin in the same place as the image / browser size, so if the browser is 1000px = pin in the same place as if the map were 350px (by the same place I mean the location in the image )

Quick code:

<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. If you want to keep the width of the icon as is, even on smaller screens.

You can use transform:translate(-50%,-100%) and then adjust the percentage of left and top to place the icon.

Fiddle: https://jsfiddle.net/mfgdp3j3/14/

2. If you want the icon to change depending on the screen size.

Additionally, you can set min-width and max-width if you feel that the size of the icon is too large / small when resizing.

Fiddle: https://jsfiddle.net/0yozs4tr/

3. If you want the icon to change with the image

Set the width of the icon as a percentage (approximately 24%). In this case, the icon may look too small with smaller screen sizes.

Fiddle: https://jsfiddle.net/mfgdp3j3/18/