Bilder skalieren

[Pomplito]

Hallo,

wenn ich eine einfache html-Seite erstelle mit nur einem Bild, welches sich beispielsweise immer auf die ganze Seite skalieren soll, dann geht das ja mit: <img src="bla.gif" width="100%" height="100%">

Nun aber mein Problem, ich möchte 4 Bilder in einer 2x2 Tabelle stellen (am besten in einer Tabelle), so dass jedes Bild 50% breit und hoch ist im Browserfenster. Nur geht folgendes nicht! :(
<table width="100%" border=0 cellspacing=0 cellpadding=0>
<tr height="50%">
<td width="50%"><img src="bla1.gif"></td>
<td width="50%"><img src="bla2.gif"></td>
</tr>
<tr height="50%">
<td width="50%"><img src="bla3.gif"></td>
<td width="50%"><img src="bla4.gif"></td>
</tr>
</table>

Er stellt die Bilder nämlich nun immer in Maximalgröße dar und skaliert es nicht auf die Größe Browserfenster... Auch zusätzliche Width/Height-Angaben bei den Bildern brachte keinen Fortschritt...

Wie kann man das dennoch machen?

[XaraX]

Hallo,

<img src="bla.gif" width="100%" height="100%">

<table width="100%" border=0 cellspacing=0 cellpadding=0>
<tr height="50%">
<td width="50%"><img src="bla1.gif" width="50%" height="50%"></td>
<td width="50%"><img src="bla2.gif" width="50%" height="50%"></td>
</tr>
<tr height="50%">
<td width="50%"><img src="bla3.gif" width="50%" height="50%"></td>
<td width="50%"><img src="bla4.gif" width="50%" height="50%"></td>
</tr>
</table>

Gruß aus Berlin!
eddi

[Patrick Schröder]

Hallöchen!

Wenn du dir deinen Code anschaust, ist das auch mehr als logisch. Du gibst dem img-Tag ja auch nicht Möglichkeit _sich zu verkleinern_!

<table width="100%" border=0 cellspacing=0 cellpadding=0>
<tr height="50%">
<td width="50%"><img src="bla1.gif"></td>
<td width="50%"><img src="bla2.gif"></td>

RICHTIGER+++ <td><img src="bla2.gif" width="50%" height="50%"></td>

</tr>
<tr height="50%">
<td width="50%"><img src="bla3.gif"></td>
<td width="50%"><img src="bla4.gif"></td>
</tr>
</table>

TROTZDEM
Dein Code bzw. Vorhaben ist sehr userunfreundlich. Du solltest bedenken, dass große Bilder viel Speicherplatz und vor allem Ladezeit brauchen! Wenn du sie per HTML verkleinerst, wird die Ladezeit nicht geringer! Als Benutz am besten Thumbnails. Da muss das Bild letztendlich zwar zweimal geladen werden, aber auch nur, wenn sich der User es überhaupt anschaut! Wenn nicht, dann musste er nur ein kleines Bild laden.
Bei 4 Bildern sind das schnell mal 4 x 40KB = 160KB => bei nem Modem-User immerhin rund 23 Sekunden sitze und warten (im Idealfall gerechnet)!

Also denk da nochmal drüber nach, ob du das tatsächlich so umsetzen willst!

Gruß Patrick

[Pomplito]

Die Bilder sind nur 1k groß, also ist es nicht schlimm! :-)

So ich habe jetzt meine 2.Variante:
<table width="100%" height="100%" border=0 cellspacing=0 cellpadding=0>
<tr height="16%">
<td width="20%"><img src="bla1.jpg" width="100%" height="100%"></td>
<td width="80%"><img src="bla2.jpg" width="100%" height="100%"></td>
</tr>
<tr height="84%">
<td width="20%"><img src="bla3.jpg" width="100%" height="100%"></td>
<td width="80%"><img src="bla4.jpg" width="100%" height="100%"></td>
</tr>
</table>

Das schöne ist, es funktioniert, wenn man die Browserhöhe verändert, dann verändert er es wie gewünscht, aber wenn man die Breite ändert, dann passiert gar nichts, d.h. die Bilder sind immer so breit, wie sie gespeichert sind und werden nicht an das Browserfenster skaliert!

Fazit: In der Höhe wird skaliert, in der Breite aber nicht? Warum?