Als Reaktion rescale und Position Bild über ansprechende Element

Question

Beispiel beste Frage zu beschreiben:

ich ein Bild haben, nennen wir es Hintergrund (blau in Beispiel). In diesem Beispiel ist das Bild

• 2000px breit/1000px hoch
• width: 100% gesetzt hat und mit dem Browserfenster neu skalieren.

ich auch ein anderes Bild haben, machen wir esgrün nennen. Es ist ein Quadrat, das

• 200 Pixel x 200 Pixel ist (Breite beträgt 10% der Größe des Hintergrund).

Was ich will, erreichen, ist, dass ich will grün dementsprechend neu skalieren und neu zu positionieren und vollständig die rosa Zielposition des Hintergrund, unabhängig von aktuellen Darstellungsbreite (in anderen Worten decken : Es sollte "reaktionsfähig" sein).

Die Neuskalierung ist einfach, da nur die Breite auf 10% eingestellt werden soll. Die Positionierung ist eine härtere Nuss zum Knacken. Der folgende Code ist so weit wie ich komme. Als ich position: absolute verwende, entferne ich das Element von seinem natürlichen Fluss und top: 40% wird 40% of 0 sein und das grüne Quadrat bleibt an der Oberseite.

Samt Beispielcode ist als CodePen zur einfacheren Bearbeitung: http://codepen.io/emiloberg/pen/vGdNaX?editors=1100#

Ist dies einfach nicht möglich, mit reinem CSS? Wenn nicht, könnte eine mögliche Abhilfe darin bestehen, das image Element einer svg zu verwenden.

.wrapper { 
 
    position: relative; 
 
} 
 

 
.bg { 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
.green { 
 
    position: absolute; 
 
    width: 10%; 
 
    left: 60%; 
 
    top: 40%; /* This isn't working */ 
 
}

<div class="wrapper"> 
 
    <img class="bg" src="https://dl.dropboxusercontent.com/u/3378286/solayout/bg.png"> 
 
    <img class="green" src="https://dl.dropboxusercontent.com/u/3378286/solayout/green.png"> 
 
</div>

(Ich hatte eine harte Zeit, um einen passenden Titel für diese Frage zu finden, Fühlen Sie sich frei zu bearbeiten.)

Answer 1

Erläuterung: http://www.w3schools.com/css/css_positioning.asp

CSS:

.bg { 
    position: relative; 
    width: 100%; 
}