Marcus-C. Ludl: img auf (viewport - x) skalieren

Hi,

Damit die Lösung für mein eigenes Problem nicht untergeht, möchte ich sie in einem eigenen Thread mit verständlicherem Titel nocheinmal erklären... nur für den Fall, daß sich jemand (außer mir) für dieses Problem interessiert.

Es ging um das Problem, ein (Hintergrund)Bild auf Viewporthöhe zu skalieren, allerdings abzüglich 100px für einen Kopfleiste. In standardkonformen Browsern kann das durch die Angabe von
"top: 100px; bottom: 0px;"
erreicht werden, allerdings ignoriert der IE bekanntlich den zweiten Eckpunkt.

Die Lösung, die ich gefunden habe, 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%;
}

/* code only for IE; *html-hack rules out non-IE 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>

Im Klartext: Ich verwende das inkorrekte Box-Model des IE, um seine inkorrekte 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?

  1. Tach.

    Damit die Lösung für mein eigenes Problem nicht untergeht, möchte ich sie in einem eigenen Thread mit verständlicherem Titel nocheinmal erklären... nur für den Fall, daß sich jemand (außer mir) für dieses Problem interessiert.

    Diejenigen werden auch fündig im Originalthread, der sich noch immer in der Forumshauptdatei befindet. Von "untergehen" kann überhaupt nicht die Rede sein. Dein Doppelposting ist somit überflüssig.

    --
    Once is a mistake, twice is jazz.
    1. Damit die Lösung für mein eigenes Problem nicht untergeht, möchte ich sie in einem eigenen Thread mit verständlicherem Titel nocheinmal erklären... nur für den Fall, daß sich jemand (außer mir) für dieses Problem interessiert.

      Diejenigen werden auch fündig im Originalthread, der sich noch immer in der Forumshauptdatei befindet. Von "untergehen" kann überhaupt nicht die Rede sein. Dein Doppelposting ist somit überflüssig.

      Verzeih mein Doppelposting. Ich persönliches halte diese Forumsstruktur für alles andere als übersichtlich und tue mir gelegentlich sehr schwer ein interessantes Posting aus den letzten Tagen wiederzufinden. Abgesehen davon stand der Originalthread unter einem eher unverständlichen Titel und ich habe im neuen Posting versucht, das Problem und meine Lösung knapp und präzise zu erklären.

      Wer sich tatsächlich am Doppelposting in dieser Form stört, kann es ja ignorieren.