Bilder, die als Inhalt einer HTML-Tabellenzelle eingefügt werden, verändern ihre Größe auf unterschiedlich großen Bildschirmen.
Wird die Bildschirmgröße verkleinert, zum Beispiel auf einem Smartphone, wird das Bild gestreckt.
Dieses Verhalten kann man verhindern und das Bild responsiv als Zelleninhalt oder Hintergrund einfügen.
Mit einem Container als Inhalt der Tabellenzelle
Der <div>-Container umschließt das Bild. Der Container kann zentriert und mit maximaler Größe versehen werden. Die Größe des Bildes soll der Größe des <div>-Elements entsprechen.
<td align="CENTER">
<div style="text-align: center; max-width: 12px;">
<img src="image_12x12.png" width="12" height="12" />
</div>
</td>
Als Hintergrundbild der Tabellenzelle
Das Bild wird als Hintergrund der Tabellenzelle eingefügt. Vorteil dieser Methode ist der freie Platz für den Textinhalt der Tabellenzelle. Der Text wird auf dem Hintergrundbild geschrieben.
<td style="width: 20%; text-align: center; background-image: url('image_12x12.png'); background-repeat: no-repeat; background-size: 15px 15px; background-position: center;"></td>
War dieser Beitrag für dich informativ? Hat er dir gefallen oder geholfen?
Dann unterstütze die Weiterentwicklung dieser Webseite mit einer kleinen Spende!
Die Spenden werden für die Lizenzen sowie neue Hard- und Software verwendet, die für weitere Projekte auf dieser Webseite eingesetzt werden. Die Werbung alleine deckt gerade mal die Server Kosten.
