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.

Beispiel: Bild in der Tabelle skaliert


Demo - Bild in Tabelle skaliert

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>

Kommentare (1)

  • Nobody
    Nobody
    am 22.01.2021
    Ja, es funktioniert ! Das Beispiel zeigt genau das, was ich gesucht habe, um z.B. ein längliches Bild in einer Tabelle, nicht nur am Computer, sondern auch z.B. auf einem Handy abzubilden. Fügt man die beiden CCS-Elemente mittels <style> in die die HTML-Datei, so kann dies dann autark benutzt und je nach dem wo man es braucht, transportiert werden. Dies hat mir viel rumbasteln erspart. Danke dafür.

Neuen Kommentar schreiben