I'm creating a responsive design of a garden where on the right top corner a map. The map is fixed in position and there are labels on the map.
I'd like to maintain the ratio of the mapbase by set a frame of the map and fill both the map and labels in.
The position of the labels is also relative (percentage number) to the map so that when the page is zoomed, the map and labels will keep the same position.
But, as I only set "width" for the "maps", there is no way to use percentage number for the height and cannot set "top" variable for the labels.
Is there a way to put object as the child of img?
If not, can I get the dimension of the image first and put it for the ".map" class so that the parent of img is exactly the same dim of img? (this is important since there are many labels with the relative coords of the base map.)
html code:
<div class="maps">
<img id="mapbase" src="assets/vector_masterplan.jpg">
<div id="maplabel" style="top:20%; left:28.5%;">Gazebo</div>
</div>
css code:
.maps {
position: fixed;
right: 3%;
top: 6%;
vertical-align: middle;
width:30%;
}
.maps #mapbase {
position: absolute;
width: 100%;
height: auto;
opacity: 0.7;
}
