Skalowanie obrazka do strony z "przypiętymi" do niego punktami

Siemka, mam następujący problem, mam taki kod

<div id='container'>
<img src=blabla id='map'>
<div class='measurement' style='left: 10%; top:10%'></div>
<div class='measurement' style='left: 20%; top:20%'></div>
</div>

I teraz tak, chciałbym, żeby mapa (img) zajmowała 100% wysokości lub szerokości viewportu (w zależności od tego, który wymiar dotknie jako pierwszy), proszę zauważyć, że są tam też pomiary, które są umieszczane na tej mapie.
I mam teraz dwa scenariusze:
1.

#map {
max-width:100vw;
max-height: 100vh;
}

Mapa dobrze się skaluje, ale tylko do momentu w którym viewport jest mniejszy niż jej wymiary w pikselach, jeśli viewport będzie większy, to mapa dalej się nie skaluje i zajmuje tylko część viewportu, za to pomiary są w odpowiednich miejscach
2.

#map{
width: auto;
max-width: 100vw;
max-height: 100vh
}

Mapa dobrze się skaluje zajmując całą przestrzeń (w przynajmniej jednym wymiarze)...jednakże element img jest np. szerszy lub wyższy niż obraz, który renderuje co z kolei prowadzi do tego, że pomiary się rozjeżdżają, są w złych miejscach i potrafią wyjść poza mapę.

Macie pomysł jak to ugryźć

No a @media używasz?

czysteskarpety napisał(a):

No a @media używasz?

używam, ale to akurat jest w desktopach

adammo94 napisał(a):

czysteskarpety napisał(a):

No a @media używasz?

używam, ale to akurat jest w desktopach

A w czym desktopy na @media szkodzą?

Poniżej trochę inny przypadek niż opisałeś, ale ilustruje metodę:

BODY {
  width:100vw;
  height:100vh;

  background-image:url("grafiki/tlo.jpg");
  background-position:center center;
  background-repeat:no-repeat;
  background-size:100% auto;
}

@media (max-aspect-ratio: 1920/1080) {
  BODY {
    background-size:auto 100%;
  }
}