Bilder in Tabellen

[melaniemueller]

Hey zusammen,

ich hab eine Tabelle erstellt mit 2 Spalten. In der ersten immer ein quadratisches Bild und in der 2. eine Erklärung dazu. Nun sieht die Tabelle in der Desktop Ansicht an sich gut aus wenn ich jedoch auf ein Smartphone wechsel wird das Bild winzig angezeigt und man erkennt nichts mehr. Ich hab die Tabelle mit der class table-responsive erstellt und dachte damit sollte es klappen damit man dann eben scrollt aber er passt die Größe immer an. Was kann ich tun?

<div class="table-responsive">
<table border="0" style="font-size:90%;">
    <tbody>
        <tr>
            <td align="center" height="70" style="background-color:#ffffff"><img alt="" src="MEINBILD" style="width: 55px; height: 53px; margin: 2px;" /></td>
            <td align="left" height="70" style="background-color:#ffffff">MEINTEXT</td>
        </tr>
</tbody>
</table>
</div>

Hier ein Teil vom Code. Die Tabelle ist im Original mit mehreren Zeilen, die jedoch alle gleich aussehen. Text und Bild sieht im Original natürlich anders aus, nur zensiert quasi

 

[M.L.]

width: 55px; height: 53px;

Das Problem (für die Darstellung mit geringerer Auflösung, z.B. Smartphone) dürfte in diesen fixen Werten bestehen. Mögliche Optionen: höhere Werte, gar keine Werte und Bild(er) in passender Grösse auf dem Server lagern,...

 

[Robert Zenz]

Um etwas auszuholen, @M.L. hat es schon gesagt, der Unterschied hier ist die physische Groesze eines Pixels. Waehrend dein Computer-Monitor vermutlich eine Aufloesung von 96ppi (pixel per inch) hat, wird dein Telefon eine von 190+ppi haben. Also das Bild ist immer noch 55px grosz, aber diese 55px nehmen eben nur ~7mm oder so auf dem Telefon ein.

Jetzt ist natuerlich das Problem der Loesung, und die Antwort ist, zumindest fuer mich als nix Web, nicht so simpel. Am besten immer mit relativen Aufbau arbeiten, also nie Pixel Werte verwenden sondern relative wie Prozent der Groesze und em verwenden.

Ich hab die Tabelle mit der class table-responsive erstellt und dachte damit sollte es klappen damit man dann eben scrollt aber er passt die Größe immer an.

Hast du die Klasse auch irgendwo definiert? Es gibt keine "Standard"-Klassen, du musst alle in deinem eigenen CSS definieren (oder halt ein Framework verwenden welche diese fuer dich definiert).

 

[melaniemueller]

Ich danke euch für die Antwort. Ich habs nun hinbekommen. Ich hab die px vom Bild rausgenommen und stattdessen eine width zum td hinzugefügt und eine width der kompletten Tabelle hinzugefügt. Nun klappts auch mit der richtigen Darstellung.