How to resize child images proportionally to parent?

user_4982097 0
Viewed 104

I have a big image, in other words, a map. I also have markers which are attached to certain positions of the map. In the following, you can see an example.

enter image description here

The map and the markers are wrapped in map-wraper and are positioned absolute.

HTML

<div class="map-wrapper">
  <img src="map.png" id="map" alt="Map">
  <img src="marker-1.png" id="marker-1" alt="Shop">
  <img src="marker-2.png" id="marker-2" alt="House">
</div>

CSS

.map-wrapper {
  position: relative;
}

#map {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#marker-1 {
  position: absolute;
  top: 140px;
  left: 300px;
}

#marker-2 {
  position: absolute;
  top: 80px;
  left: 40px;
}

The problem is when I resize the browser, the markers get out of position. I want the markers also to be resized proportionally to their parents. In this case map-wrapper.

I have tried this CSS trick, but it didn't help. https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

The reason why I don't just merge the markers with the map is that I want to give the markers hover effects.

Thanks in advance!

responsive-design css html
2 Answers

Keep markers position on the map

Use relative percentage units for markers' topand left CSS properties.

This way the markers should stay at the same position relative to their relatively positioned parent container <div class="map-wrapper">.

#marker-1 {
  position: absolute;
  top: ...%;
  left: ...%;
}

#marker-2 {
  position: absolute;
  top: ...%;
  left: ...%;
}

Keep markers size relative to wrappers dimensions

Use relative percentage units for markers' height and set their width to auto.

This way the markers should keep the same size relative to their relatively positioned parent container's <div class="map-wrapper"> height.

#marker-1 {
 ... some properties here...
 height: ...%;
 width: auto;
}

#marker-2 {
 ... some properties here...
 height: ...%;
 width: auto;
}
user_85472140

Use calc() function instead to compute the position based on the browser size (%).

user_172928830
Related