Skalierbare Bilder in Tabellen

[Fieterich]

Hallo,

ich habe hier in einer Dokumentation immer das folgende Problem:

Meine Vorgänger haben an vielen Stellen links ein Bild gezeigt und rechts davon mit Text beschrieben, also innerhalb einer Tabelle. Im Code sieht das wie folgt aus:

    <table border="0" cellpadding="3" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
      <tr>
        <td width="494" valign="top">
        <img border="0" src="BILD.png" width="494" height="180"></td>
        <td valign="top"><p class="absatz_eng">Blablabla ...</p></td>
      </tr>
    </table>

Diese Bilder sollen sich automatisch anpassen, wenn die Tabelle bzw. der Viewport verkleinert wird. Mir ist schon klar, dass Tabellen dazu vielleicht nicht unbedingt geeignet sind, aber es sind an die 500 Dateien mit x-mal dieser Konstellation. Mir geht es also gerade eher um eine schnelle Lösung. Allerdings sind mir Alternativen auch willkommen.

[Jonathan Harker]

Hallo,

links ein Bild gezeigt und rechts davon mit Text beschrieben, also innerhalb einer Tabelle. Diese Bilder sollen sich automatisch anpassen, wenn die Tabelle bzw. der Viewport verkleinert wird.

Prozentuale Breiten bei den Bildern, evtl max-width beim Text, ansonsten media queries

Mir ist schon klar, dass Tabellen dazu vielleicht nicht unbedingt geeignet sind, ...

Perfekt, dann nimm das figure-Element

Tutorial:Bilder_mit_Bildunterschriften

aber es sind an die 500 Dateien mit x-mal dieser Konstellation. Mir geht es also gerade eher um eine schnelle Lösung.

Alle Dateien im Notepad++ öffnen und mit "Suche und Ersetzen" in allen Dokumenten ändern.

Das dauert trotz allem ein büschen, aber dann isses gemacht.

Groß Jo

[Matthias Apsel]

Hallo Fieterich,

siehe https://forum.selfhtml.org/self/2016/sep/6/inline-block-zwei-flexible-elemente-nebeneinander/1674922#m1674922?

Bis demnächst
Matthias

[Martl]

Hallo Fieterich,

empfohlen wäre ein Totalumbau, wie @@Harker und @@Aspel bereits erwähnten; ist auf lange Sicht besser.

Wenn Du unbedingt bei dem Tabellenlayout beleiben willst, entferne alle width/height-Attribute und benutze CSS, etwa so:

img{width:100%;}
table{width:100%}
td{width:50%;}

Aber nur dann!

Gruß, Martl

[Fieterich]

Danke für die schnellen Antworten. Ja, ein Totalumbau in 2017 steht an (auch vom Layout her), da werden wir noch was zu tun haben. Tausend Dank!

Gruß

Fieterich