HTML – Tabellenbilder responsiv einfügen


Bilder, die als Inhalt einer HTML-Tabellenzelle eingefügt werden, verändern ihre Größe auf unterschiedlich großen Bildschirmen.

HTML-Tabellenzellbild - normal Ansicht
Normale Ansicht

Wird die Bildschirmgröße verkleinert, zum Beispiel auf einem Smartphone, wird das Bild gestreckt.

HTML-Tabellenzellbild - verkleinerte Ansicht
Verkleinerte Ansicht

Dieses Verhalten kann man verhindern und das Bild responsiv als Zelleninhalt oder Hintergrund einfügen.



Anzeige

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.




Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.