css3 RWD und Position

Das Problem:

Bei der Erstellung dieser Seite stieß ich auf ein Problem, das ich nut mit den Mitteln von css3 und html5 einfach nicht lösen konnte. Zum einen ist es unausweichlich für das Überblenden von Bildern position: relative; in Verbindung mit position: absolute; zu verwenden, zum anderen kann bei dieser Kombination die Höhe der Elternelemente nicht vom Inhalt der Kindelemente bestimmt werden, da absolut positionierte Elemente aus dem normalen Dokumentenfluss der Seite herausgelöst sind. Schliesslich habe ich das Problem mit wenigen Zeilen Javascript lösen können.

css3 Code:

#eltern {
	position: relative;
}
#kind1, #kind2 {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100%;
}
#kind2 {
	opacity: 1;
}
#eltern:hover #kind2 {
	opacity: 0;
}

HTML5 Code:

<div id="eltern">
    <img id="kind1" src="..." />
    <img id="kind2" src="..." />
</div>

Die Lösung

Man ermittelt mit Hilfe einer Javascript Funktion die Höhe des größten Kindelements und weist diese dem Elternelement beim Laden der Seite und jeder Größenänderung des Browserfensters zu.

<script>
function myFunction() {
    var element = document.getElementById('kind2').
    offsetHeight;
    var n = "" + element + "px";
    document.getElementById('eltern').
    style.height = n;
    }
</script>

<body onload="myFunction()" onresize="myFunction()">

Das Problem:

Die Lösung

Beispiel:

Beispiel:

Beispiel: