Ich erstelle ein responsives Design eines Gartens, wo auf der rechten oberen Ecke eine Karte ist. Die Karte ist in ihrer Position fixiert, und auf der Karte befinden sich Beschriftungen.Bilddimension für Elternobjekt verwenden
Ich möchte das Verhältnis der mapbase durch Festlegen eines Rahmens der Karte erhalten und füllen sowohl die Karte und Etiketten in.
Die Position der Etiketten auch relativ ist (Prozentzahl) auf der Karte Wenn die Seite gezoomt wird, behalten Karte und Beschriftungen die gleiche Position bei.
Da ich aber nur "width" für die "maps" einstelle, gibt es keine Möglichkeit die prozentuale Anzahl für die Höhe zu verwenden und kann keine "top" Variable für die Labels setzen.
Gibt es eine Möglichkeit, ein Objekt als Kind von img zu setzen?
Wenn nicht, kann ich die Dimension des Bildes ersten und legte sie für die „.map“ Klasse, so dass die Eltern von img ist genau das gleiche dim von img? (Dies ist wichtig, da es viele Etiketten mit den entsprechenden Koordinaten der Basiskarte ist.)
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;
}