Martin: HTML: Dynamische Bildgröße

Hallo zusammen,

vielleicht finde ich hier eine Antwort auf folgende kniffelige Frage:

Wie muß ich ein Bild in HTML einbinden, damit seine Größe dynamisch angepaßt wird?

Hintergrund ist folgender: Die betreffende Webseite ist ganz klassisch in 4 Bereiche unterteilt, nicht mit Frames, sondern mit einer Tabelle, deren Spaltengrößen prozentual angegeben sind, damit bei größeren Auflösungen oder Änderungen der Fenstergröße die Proportionen erhalten bleiben. Die linke Spalte ist mit 20% dimensioniert und es soll dort ein Bild eingefügt werden, das sich in die Spaltenbreite einpaßt. Wenn ich es in der Gestalt:

<img src="./pic/pq1.jpg" width=100%>

einbinde, oder sogar in die Tabellenzelle noch eine begrenzende Tabelle einfüge:

<table width=100% border=0 cellspacing=0 cellpadding=0>
<tr>
<td><img src="./pic/pq1.jpg" width=100%></td>
</tr>
</table>

, dann wird das Bild in Mozilla wunderbar auf Spaltenbreite skaliert. Nur der IExplorer (v6.0) zickt herum und stellt das Bild in der ganzen Breite dar und verbreitert damit ungewollt die linke Spalte.

Gibt es für dieses Problem eine Lösung oder ein Workaround, vielleicht mit CSS? Interessanterweise klappt das, wenn man das Bild unterhalb des <body>-Tags einfügt, dann wird es über die gesamte Seite gezogen und bei Größenänderungen des Fensters angepaßt.

Vielen Dank

  1. Hi,

    Das Problem ist die Tabellenzelle. Da hierfür keine Breite definiert ist, soll sie sich ja dem Inhalt anpassen und dieser wiederum der Zelle...

    freundliche Grüße
    Ingo

    1. Hallo Ingo,

      danke für den Denkanstoß! Ich habe das Problem mit der CSS-Angabe "table-layout: fixed" gelöst.

      <table width=100% border=0 cellspacing=0 cellpadding=0 style="table-layout: fixed;">
      <tr>
      <td><img src="./pic/pq1.jpg" width=100%></td>
      </tr>
      </table>

      Dadurch, daß dem Bild die 100%-Weite vorgegeben wird, baßt es sich nun in die Spaltenbreite ein.