Position div über bestimmte Region von Bild mit variabler Höhe
Ich arbeite daran, ein div über ein Bild mit variabler Höhe zu positionieren und frage mich, wie ich diese Situation am besten angehen kann. Im folgenden Beispiel versuche ich beispielsweise, das rote Quadrat über dem Symbol für eingetragene Marke im Bild zu positionieren: Geige .
Mein HTML / CSS sieht so aus:
%Vor%Und ich positioniere das rote div über das Bild mit dem folgenden JS:
%Vor%Die Ergebnisse sind nicht ideal, da ich nur zwei lineare Modelle zur Berechnung der x- und y-Offsets erstelle. Wie würden andere diese Aufgabe angehen?
4 Antworten
Dies kann mit CSS und einigen Änderungen an Ihrem Markup
erreicht werden Das Bild in Ihrem Beispiel wird in Relation zur Höhe des Ansichtsfensters skaliert - die Höhe ist immer 100% und die Breite wird im laufenden Betrieb vom Browser berechnet, um das Seitenverhältnis beizubehalten.
Um das Overlay zu positionieren, muss die gleiche Skalierung angewendet werden. Dazu kann ein Container hinzugefügt werden, der die Höhe des Ansichtsfensters anpasst und auf die Breite des Bildes skaliert. Dadurch kann das Overlay relativ dazu positioniert und proportional zum Bild skaliert werden.
Folgende Änderungen sind erforderlich:
- Wrap
.backgroundund.overlayin einem Container (in dieser Instanz#containergenannt) - Setzen Sie
#containermit den folgenden Eigenschaften:-
height: 100vh;- Dadurch wird die gesamte Ansichtsfensterhöhe gefüllt -
margin-top: -61px;- Von deinem Beispiel übernommen -
position: relative;- Um sicherzustellen, dass.overlayin Bezug auf diesen Container positioniert ist -
width: 570vh;- Dies stellt sicher, dass der Container mit der gleichen Geschwindigkeit skaliert wie das Bild. Dies wird berechnet, indem das Seitenverhältnis Ihres vorhandenen Bildes gefunden wird - 1140 x 200 ist ein Seitenverhältnis von 57: 10, also 200 (px) * 5,7 = 1140 (px) wird zu 100 (vh) * 5,7 = 570 (vh)
-
- Setzen Sie
.backgroundmit den folgenden Eigenschaften:-
height: 100%;- Um sicherzustellen, dass die Größe in ähnlicher Weise wie in Ihrem Beispiel geändert wird, wird die gesamte Höhe des Ansichtsfensters ausgefüllt. Die Breite wird in Relation zu diesem skalieren
-
- Setzen Sie
.overlaymit den folgenden Eigenschaften:-
background: red;- Von deinem Beispiel übernommen -
height: 6vh;- Wenn das Bild in Relation zur Höhe des Ansichtsfensters skaliert wird, wird sichergestellt, dass das Overlay mit der gleichen Rate skaliert wird -
left: 18.3%;- Positioniert das Overlay im angegebenen Bereich über dem registrierten Symbol -
position: absolute;- Positioniert das Overlay relativ zum Container -
top: 29%;- Positioniert das Overlay im angegebenen Bereich über dem registrierten Symbol -
width: 6vh;- Wenn das Bild in Relation zur Höhe des Ansichtsfensters skaliert wird, wird sichergestellt, dass das Overlay mit der gleichen Rate skaliert wird
-
JS Fiddle - Ändere die Höhe des Ergebnisfensters und die Überlagerung sollte sich entsprechend neu positionieren.
Als ich gestern nach Hause ging, wurde mir klar, dass dieses Problem sehr einfach ist.
Die Proportionen des Bildes sind konstant und die Überlagerung hat zwei Werte: x-Position und y-Position. Die x-Position ist nur ein Bruchteil der Bildbreite und die y-Position ist ein Bruchteil der Bildhöhe.
So kann man die Position der Überlagerung mit zwei Gleitkommawerten {0,1} darstellen: eine für die Position der Überlagerung auf der x-Achse und die andere für die y-Achse. Dann multiplizieren Sie diese Werte einfach mit der Breite und Höhe des Bildes, um die geeigneten x, y-Positionen für das Overlay zu finden.
Damit die Überlagerung konstant über dem interessierenden Punkt positioniert bleibt (zB {0: max-image-x}, {0: max-image-y}) muss nur die Hälfte der Breite der Überlagerung div subtrahiert werden von der x, y Position berechnet.
Hier ist Geige , ich habe nach dem Posting festgestellt, was das Ende Ihrer Frage ist ... Wie auch immer, ich habe die Antwort hier gelassen, weil es zumindest so ist genau positioniert. Ich denke, es gibt keinen besseren Ansatz als einen, den du bereits versucht hast.
%Vor%Jahre später erkannte ich, dass eine optimale Methode zur Positionierung eines Elements über einer bestimmten Region eines Bildes darin besteht, ein SVG zu verwenden, das Bild dem SVG hinzuzufügen und SVG-Elemente über den interessierenden Punkten im Bild zu positionieren .
Diese Seite hat ein Beispiel , in dem ein Bild eines Gebäudes mit übereinander gestapelten Stockwerken versehen ist Ein Stockwerk (z. B. Stock 22) markiert dieses Stockwerk:
Hier ist das relevante Markup:
%Vor% Das Gebäudebild wird im image -Tag gespeichert, und jedes Stockwerk erhält ein polygon über dem Bild positioniert. SVG-Größenänderungsregeln verarbeiten die SVG-Dimensionierung und alle untergeordneten Elemente skalieren mit dem skalierten Bild!
Tags und Links javascript html css css-position position