Diese Webseite verwendet Cookies. Diese werden u.a. zu statistischen Zwecken verwendet. mehr Informationenschließen
 

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 (0)

No comments found!

Neuen Kommentar schreiben