Responsive Images in Tabellen

Responsive Images lassen sich mit CSS ja sehr einfach realisieren:

img {
   height:auto;
   max-width:100%;
   width:auto
}

Anders verhält sich die Sache, wenn sich das Bild innerhalb einer Tabelle befindet. Ohne entsprechende Anpassung der Tabelle skaliert das Bild nämlich überhaupt nicht und sprengt damit das responsive Layout.

Folgendes CSS schafft hier aber Abhilfe:

table {
   table-layout: fixed;
   max-width:100%;
   width:100%;
}

Und schon passt sich das Bild wie gewünscht an Größenveränderungen des Browserfensters an.

Code des obigen Beispiels:

<table style="border:solid 1px #444444; table-layout: fixed; max-width:100%; width:100%;">
    <tr>
        <td style="text-align:center"><img style="height:auto; max-width:100%; width:auto" src="fileadmin/itfoo/bilder/web/beispiel_bilderintabellen.jpg" alt="Demo - Bild in Tabelle skaliert"></td>
    </tr>
</table>