nicht angemeldet
Hallo,
Entweder Breite *oder* Höhe mittels CSS (width/height:100%)
In Mozilla 1.5 und Konqueror 3.11 kann man ein Vordergrund-Bild
mit CSS auch in beiden Richtungen auf 100% strecken (verzerren):
http://www.tiptom.ch/tests/mix/bild100.html
Vollstaendiger Quelltext (valides HTML und CSS):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bild auf 100% gestreckt</title>
<meta http-equiv="Content-Type" content="text/html; ISO-8859-1">
<style type="text/css">
html, body, p, img { width:100%; height:100%; margin:0; border:0 none; padding:0; display:block; }
</style>
</head>
<body>
<p><img src="..." alt="..."></p>
</body>
</html>
Ohne display:block gibt es bei Mozilla einen (fast ueberfluessigen)
vertikalen Scrollbalken.
Die Variante mit dem verlinkten Bild
http://www.tiptom.ch/tests/mix/bild100a.html
hat folgenden Quellcode:
CSS:
html, body, p, a, img { width:100%; height:100%; margin:0; border:0 none; padding:0; display:block; }
HTML:
<p><a href=".."><img src="..." alt="..."></a></p>
display:block ist IMHO sicher notwendig, um aus A ein
Block-Level-Element zu machen.
(In Mozilla koennte man es auch weglassen und den
Link trotzdem auf 100% Breite und Hoehe ausdehnen,
aber in MS IE funktioniert das AFAIK nur, wenn man
display:block hat.)
Konqueror 3.1.1 hat bei beiden Beispielen IMHO einen Bug:
Beim ersten Mal Laden zeigt er das Bild brav an.
Nach einem Reload nicht mehr - weisses Fenster. ;-(
Wenn man nach einem Reload die Groesse des Browserfensters
aendert, zeigt er das Bild wieder an.
Netscape 4.78 (Linux) zeigt das Bild in "normaler" Groesse
oben links im Fenster an (Jaja, CSS ist aktiviert... ;-)
Es kommt mir kein schlauer Anwendungsfall fuer diese Sache
in den Sinn, denn die meisten Bilder wirken ja, wenn sie
verzerrt werden, ziemlich haesslich. Aber weil die Frage, wie
man ein Bild aufs ganze Browserfenster ausdehnen kann,
hier immer wieder gestellt wird, nimmt mich die Loesbarkeit
eben doch wunder...
=> Ich freue mich ueber Rueckmeldungen zu den beiden Testseiten,
insbesondere dazu, wie sie in MS IE dargestellt werden.
Freundliche Gruesse,
Thomas
Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
Ich mag es, wenn URLs verlinkt sind (</faq/#Q-19>).
Oft gestellte PHP-Fragen beantwortet die dclp-FAQ bestens: http://www.dclp-faq.de/