Ich habe eine kleine Website für unseren Verein erstellt und dabei den Grundriss mit Tabellen gemacht.
Dafür sind Tabellen nicht da. Für Layout benutzt man heutzutage kein HTML (also auch keine divs), sondern CSS.
Geht Height eigentlich überhaupt in %
Alles geht in allen Einheiten. Nur manche sind mehr oder weniger sinnvoll. %, em, px, pt, em, ex, egal ob width oder height. Verwendest Du % ist der Bezug aber das Elternelement, nicht der Viewport (und schon gar nicht die Auflösung, die ist beim Erstellen von Websites irrelevant).
Ist das Elternelement ein Block-Element (wie z.B. auch body), dann scheint width gut zu funktionieren, denn Block-Elemente sind per Default immer 100% breit, also letztlich auch so breit, wie der Viewport (margins u.ä. mal ausgenommen).
Hoch sind Block-Elemente aber immer nur so wie ihr Inhalt, also nicht so hoch wie der Viewport. Daher entsteht für Anfänger der Eindruck, height würde nicht funktionieren. Wenn Du aber den obersten Elementen auf Deiner Seite (das sind body und html) die Höhe 100% gibst, dann beziehen die sich wiederum auf ihr Elternelement, das ist der Viewport. Dann wird auch ein Image, das im body mit height:100% angegeben ist, auf die gesamte Seite gestreckt.
Aber wenn jemand nun die die Auflösung ändert, passt das Bild nicht mehr in den Rahmen.
Das hat nicht direkt was mit der Auflösung zu tun, vielmehr mit der Größe des Browserfensters. Du kannst die Auflösung vergrößern, das Browserfenster aber in der selben Größe lassen, dann ändert sich nichts. Du kannst aber die Auflösung so lassen und einfach das Fenster verkleinern, dann ändert sich auch was. Die Auflösung ist hier irrelevant, außer dass sie die Größe des Fensters nach oben hin beschränkt. Aber prozentuale Angaben beziehen sich nie auf die Auflösung, sondern immer nur auf den Viewport (also der Teil des Browserfensters ohne Rahmen, Balken, Toolbars, Sidebars usw.).
Hat jemand einen Tipp was man dagegen tun kann oder bracht man dafür zwingend Javascript und tausend Versionen des Bildes für jede x-beliebige Auflösung
Das vorrangige Problem dabei ist, dass das Vergrößern/Verkleinern eines Images durch den Browser immer ein schlechtes Ergebnis bringt. Daher würde ich eher empfehlen, Bilder immer in einer Größe anzuzeigen, egal wie groß das Browserfenster ist. Eher dann noch 2-3 verschieden große, die man dann per JavaScript austauschen könnte, hier aber bitte, wie schon erklärt, nicht die Auflösung als Maßstab nehmen, sondern die Größe des Viewports.
So müsste es gehen
Indem du dem Bild "width=100%" gibst, passt es sich seinem umgebenden "Kasten" an.
Wozu packst Du das Bild extra in einen Kasten? Nur wegen der Vorgabe mit dem Kästchen?
