Bildgröße an Fenstergröße anpassen
Christoph
- grafik
0 Thomas Luethi0 Cybaer0 christoph0 Thomas Luethi0 Cybaer
Kann mir jemand sagen, wei ich ein Bild an die Fenstergröße anpassen kann?
Dass ein bild bei versch. Auflösungen (800x600, 1024x768 ect.) gleich groß ist. Geht das irgendwie?
Christoph
Hallo,
Kann mir jemand sagen, wei ich ein Bild an die Fenstergröße anpassen kann?
Ja. Siehe ein paar Threads weiter unten: [pref:t=75552&m=435150]
sowie tausendfach im </archiv/>
Dass ein bild bei versch. Auflösungen (800x600, 1024x768 ect.) gleich groß ist.
Es ist doch der Normalfall dass ein Bild gleich gross bleibt (in Pixeln gemessen,
z.B. 500x375 Pixel gross). Dafuer musst Du gar nichts tun.
Nur nimmt es dann auf einem groesseren Bildschirm relativ gesehen
weniger Platz ein und wirkt somit unter Umstaenden "kleiner"...
Gruesse,
Thomas
Hi,
Dass ein bild bei versch. Auflösungen (800x600, 1024x768 ect.) gleich groß ist. Geht das irgendwie?
Entweder Breite *oder* Höhe mittels CSS (width/height:100%), oder Breite *und* Höhe mittels JavaScript (Seite, wo Du Dich aber selbst durch den Code wurschteln mußt: http://www.monstropolis.org
Gruß, Cybaer
THX, mit dem css geht das super.
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
Hi,
In Mozilla 1.5 und Konqueror 3.11 kann man ein Vordergrund-Bild
mit CSS auch in beiden Richtungen auf 100% strecken (verzerren):
Aber wahlweise?
D.h., das Bild hat *unverzerrt* volle Höhe *oder* Breite - also je nachdem, ob das Browserfenster "schmal oder flach" ist?
Ich denke, weniger die "Bildschirmfüllung" ist wichtig, sondern eher, daß das Bild unverzerrt den größtmöglichen Platz einnimmt?! Halt unabhängig davon, ob der Surfer 16:9 oder 9:16 bevorzugt. ;-)
=> Ich freue mich ueber Rueckmeldungen zu den beiden Testseiten,
insbesondere dazu, wie sie in MS IE dargestellt werden.
Sollte ich 'ne Sekunde Zeit haben melde ich mich wieder! :-)
Gruß, Cybaer
Hallo,
Ich denke, weniger die "Bildschirmfüllung" ist wichtig, sondern eher, daß das Bild unverzerrt den größtmöglichen Platz einnimmt?!
Das ist die Frage! ;-)
Manche Leute wollen genau das: dass ein Bild das Fenster komplett fuellt:
http://www.tiptom.ch/tests/mix/bild100.html
Andere wollen, dass es moeglichst breit dargestellt wird:
http://www.tiptom.ch/tests/mix/bild100b.html
Oder moeglichst hoch:
http://www.tiptom.ch/tests/mix/bild100h.html
Halt unabhängig davon, ob der Surfer 16:9 oder 9:16 bevorzugt. ;-)
Das ist der Knackpunkt! ;-)
Ich verstehe jetzt langsam _Deine_ Fragestellung so:
"Wie kann ich das Bild - unter Wahrung der Proportionen - in einem
unbekannt grossen Fenster moeglichst gross darstellen?"
Und das ist ohne JavaScript auch IMHO nicht moeglich,
weil es ja sowohl von den Proportionen/Dimensionen des Bildes
als auch von denen des Fensters abhaengt, ob das Bild mit
100% Breite oder 100% Hoehe dargestellt werden kann, ohne
dass es in der anderen Dimension zu gross wird fuer das Fenster.
Gruesse,
Thomas