- TYPO3: Redirects auf 301- 10.03.22
- PrestaShop: Herr, Frau, Divers- 03.02.22
- Plesk, externer Maildienstleister, unzustellbar- 17.06.21
- TYPO3 Bootstrap Package Error- 27.04.21
- LineageOS Update 17.1 auf 18.1- 11.04.21
- TYPO3 & Core Web Vitals- 24.02.21
- TYPO3 Seitentitel, SEO Title und alternativer Navigationstitel- 13.02.21
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
![]() |
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
am 22.01.2021