Panoramabilder

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Die Breite eines Bildes soll dynamisch an die Größe des Browserfensters angepasst werden, wie in folgender Abbildung zu sehen ist.

Im vergrößerten Browserfenster ist mehr vom Panoramabild zu sehen

Abbildung: Im vergrößerten Browserfenster ist mehr von dem Panoramabild zu sehen.

Lösung

Platzieren Sie das Bildelement für das Panoramabild im Hintergrund eines Blockelements (siehe nächste Abbildung).

<h1>Visit France City!</h1>
<div><img src="frenchtown.jpg" alt=" " /></div>
<h2>The quaint and charming little destination in France</h2>

Panoramafoto auf Webseite ohne CSS

Abbildung: Das Panoramafoto auf einer Webseite ohne CSS.

Positionieren Sie das Hintergrundbild in der rechten oberen Ecke des Blockelements und verstecken Sie dann das eigentliche Bildelement, indem Sie der Eigenschaft display den Wert none zuweisen:

div {
 background-image: url(frenchtown.jpg);
 background-repeat: no-repeat;
 background-position: top right;
 height: 300px;
 border: 1px solid black;
 max-width: 714px;
}
div img {
 display: none;
}

Wird das Bild als Hintergrund eines Blockelements benutzt, wird seine Größe basierend auf der Größe des Browserfensters angepasst.

Diskussion

Um ein Panoramabild zu präsentieren, benötigen Sie erst einmal ein breites Foto. Danach müssen Sie das Bild in der rechten oberen Ecke positionieren, damit es an die Größe des Browserfensters angepasst werden kann. Die Verwendung der Eigenschaft max-width verhindert, dass das div-Element breiter wird das Bild selbst.

In dieser Lösung wird das gleiche Bild im HTML- und auch im CSS-Code benutzt. Auf diese Weise wird das Bild auch dargestellt, wenn das Benutzerprogramm nicht CSS-fähig ist.

Siehe auch

die CSS 2.1-Spezifikation zur Eigenschaft max-width.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln