Bild auf div-Höhe skalieren?

[Marcus Ludl]

Hi,

Nur für den Fall, daß sich jemand (außer mir) für dieses Problem interessiert, möchte ich die Lösung beschreiben, die ich gefunden habe. Sie kommt gänzlich ohne Scripting aus und verwendet lediglich einen CSS Hack, um dem Internet Explorer anderen Code zuzuführen:

Die CSS-Datei enthält folgende Angaben:

/* code version for standard compliant browsers (e.g. Mozilla) */
#container {
  position: absolute;
  top: 100px;
  bottom: 0px;
}

#container img.background {
  height: 100%;
}

/* additional code only for IE; *html-hack rules out other browsers */
* html #container {
  top: 0px;
  height: 100%;
  overflow: hidden;
}

* html #container img.background {
  border-top: 100px solid #FFFFFF;
}

Die HTML-Datei enthält dann ganz einfach folgendes:

<div id="container">
  <img class="background" src="backgroundpic.gif">
</div>

Das heißt, ich verwende das falsche Box-Model des IE, um seine falsche  Handhabung der kombinierten top/bottom-Angabe zu umschiffen: Ich definiere einfach einen border-top in der selben Höhe wie die gewünschte Kopfleiste (die eigentliche Kopfleiste lege ich dann mittels z-order drüber). Da der IE den border zur height hinzurechnet, ergibt die Angabe "height: 100%;" den gewünschten Effekt.

Unklar ist mir bloß noch, ob das nun bei allen relevanten Browsern funktioniert... kann mir dazu jemand näheres sagen?