 Grafik full screen anzeigen - Bild strecken - Vollbild
Sie möchten zum Beispiel für eine Startseite eine Grafik so strecken, das sie das gesamte Fenster ausfüllt. Zugegeben, dieses Anwendungsbeispiel eignet sich nicht für jede Grafik und seltener für Fotos (motiv-abhängig).
|
|
Grafik an die Fenstergröße anpassen
UPDATE 2 weitere Demos mit Rand und überlagertem Text / Links
Innerhalb einer fensterfüllenden Box strecke (oder stauche) ich eine Grafik auf die Innenmaße dieser Box! Klicken Sie oben auf 'Demo'
Als Basis dient eine Grafik, die sehr wahrscheinlich später nicht den wirklichen Maßen des Browserfensters oder des Frames entspricht. Schließlich wissen Sie nie, mit welcher Auflösung der Besucher die Webseite anschaut und welche Toolbars und Menüs angezeigt werden.
Ich verwende daher eine Grafik die auch leicht verzerrt nicht irritierend wirken und verzichte auf Elemente die immer in proprortionaler Größe angezeigt werden sollten wie z.B. Personen.
Ich habe ein wenig getüftelt und einen Weg ganz ohne Javascript gefunden, die Anzeigegröße für eine Grafik anzupassen.
CSS im Head-Bereich
<style type="text/css">
<!--
body {
overflow:hidden; // sicherheitshalber keine Scrollbars
margin:0px;
padding:0px;
}
#Bildbox{
width:100%;
height:100%;
}
.anpassen{
width:100%;
height:100%;
}
-->
</style>
Notierung im Body-Bereich
<div id="Bildbox">
<img border="0" class="anpassen" src="grafik.jpg">
</div>
Die in der Bildbox angezeigte Grafik kann auch als Verweisfläche für einen weiterleitenden Link definiert werden (siehe unten).
Funktion
Ich notiere zuerst einen <div>-Bereich, der das gesamte Fenster ausfüllen soll. Diesen Bereich, ich nenne ihn einmal 'Bildbox', ordne ich für Breite und Höhe die Eigenschaft 100% zu. Das bewerkstellige ich mit CSS. Die Box ist nun 100% hoch und 100% breit und füllt das gesamte Fenster.
<div id="Bildbox">
hier soll die Grafik stehen
</div>
#Bildbox{
width:100%;
height:100%;
}
Nun notiere ich innerhalb der 'Bildbox' die anzuzeigende Grafik ohne Attribute für Höhe und Breite:
<div id="Bildbox">
<img width="xxx" height="xxx" border="0" src="grafik.jpg">
</div>
Dieser Grafik möchte ich nun durch CSS-Anweisungen Eigenschaften geben, die sie in Breite und Höhe an die Innenmaße der 'Bildbox' anpassen. Ich notiere eine CSS-Unterklasse 'anpassen' und stelle die Verbindung zu diesen CSS-Anweisungen durch das Attribut 'class' im <img>-Tag her.
.anpassen{
width:100%;
height:100%;
}
<div id="Bildbox">
<img class="anpassen" border="0" src="grafik.jpg">
</div>
Das Element innerhalb der 'Bildbox', das die Klasse 'anpassen' hat, hat hiermit eine Höhe von 100% der zur Verfügung stehenden Höhe bzw. eine Breite von 100% der zur Verfügung stehenden Breite!
Die Breite und Höhe für Elemente der Klasse 'anpassen' lege ich nicht in Pixel sondern ebenfalls in Prozentangaben mit 100% fest. Dabei beziehen sich die Größenangaben 100% nun auf den maximal zur Verfügung stehenden Platz innerhalb des übergeordneten Elements 'Bildbox', also auf 100% der Höhe und Breite innerhalb der 'Bildbox'.
a Grafik als Link
Soll die so angepasste Grafik auf einer Startseite z.B. als Verweisfläche für einen Link dienen, ist das natürlich auch möglich:
Notierung im Body-Bereich
<div id="Bildbox">
<a title="weiter zur Webseite" href="http://www.clickstart.de">
<img border="0" class="anpassen" src="grafik.jpg">
</a>
</div>
b Grafik mit Rand?
Experimente mit den Einstellungen für den Rand der Grafik führten im FF nicht zu einem vernüftigen Ergebnis. Eigenwillig sieht der FF den Rand als Bereich, der zur Breite und Höhe der Grafik hinzu addiert werden soll. Im IE sieht das noch Ok aus.
 Demo ansehen
b mit Rand durch Marginangaben für die Seite
Als Alternative habe ich für die gesamte Seite ein Margin von 20 Pixel eingetragen und die Seitenhintergrundfarbe festgelegt. Sieht aus wie ein Rand und funktioniert auch im FF.
Demo ansehen
<style type="text/css">
<!--
body {
overflow:hidden;
margin:20px;
padding:0px;
background-color:#000000;
}
#Bildbox{
width:100%;
height:100%;
}
.anpassen{
width:100%;
height:100%;
}
-->
</style>
 Fenstergröße berechnen
Grafik strecken fensterfüllend anzeigen
|
Home • Bilder • Vollbild
zip
