Hallo,
ich hab versucht mir mein Problem zu ergooglen und auch die Forensuche versucht, aber entweder schaffe ich es nicht mein Problem richtig zu formulieren um die richtigen Treffer zu finden oder es ist so einfach, dass jeder darauf kommt... außer mir.
Es geht um folgendes. Ich möchte bei einer Webseite : www.stb-eselgrimm.de den Kopf so gestalten, dass 40% das Logo einnimmt, 40% das erste Bild und 20% das zweite Bild. Das klappt auch ganz gut mit den bildern die ich aktuell verwende, die sind aber nur 340x170 bzw. 170x170 px groß und da die Monitore gewachsen sind verpixelt das jetzt arg.
Dazu will ich nun Bilder in vierfacher Größe verwenden, also 1360x680 px bzw. 680x680 px und die entsprechend anpassen lassen. Mein Problem ist, dass die Bilder zwar auf die korrekte Breite von 40 bzw. 20% der angezeigten Fläche gedrückt werden, aber die länge unverändert bleibt.
Ich möchte also die Höhe abhängig der Breite machen und zwar so, dass beides sich automatisch anpasst.
Mein css sieht dazu aus wie folgt:
table.diffStyle { background-color:#17375E; font-size:110%; font-family:Tahoma,Verdana,Arial,sans-serif; text-align:center;margin-bottom:0.5em; border-collapse:collapse; outline-width:0.14em; outline-style:solid; outline-color:#17375E; }
th.diffStyle { background-color:#17375E;width:40%; height:inherit; border-left-width:0.21em; border-left-style:solid; border-color:#ffffff; padding-left:0.21em; padding-right:0.21em; padding-top:0em; padding-bottom:0em; text-align:center; border-collapse:collapse; } th.diffStylenbr { background-color:#17375E; width:20%; height:inherit; border-left-width:0.21em; border-left-style:solid; border-color:#ffffff; padding-left:0.21em; padding-right:0.00em; padding-top:0em; padding-bottom:0em; text-align:center; border-collapse:collapse; }
th.diffStylenb { background-color:#17375E; width:40%; height:auto; line-height:125%; font-size:2.3em; font-family:TimesNewRoman,serif; color:#ffffff; font-variant:small-caps; text-align:center; border-style:none; border-collapse:collapse; }und das html der webseite dann so:
/table class="diffStyle" summary="header"\ /tr\/th class="diffStylenb"\Eselgrimm und Partner
â–
Steuerberater//th\/th class="diffStyle"\/img src="img/schiff.jpg" alt="Steuerbüro Eselgrimm und Partner"/\//th\/th class="diffStylenbr"\/img src="img/steuer.jpg" alt="Steuerbüro Eselgrimm und Partner"/\//th\//tr\//table\mist, wie krieg ich denn die Codebox so, dass sie nicht ewig in die Breite geht...
und warum funktioniert das mit dem html-code in der box nicht.... ich hab jetzt die < durch / und > durch \ ersetzt
Der Firefox macht es "von sich aus" richtig und skaliert das Bild entsprechend. Chrome und Internet Explorer dagegen drücken das Bild nur zusammen, belassen aber die Länge.
Ich hab schon versucht im CSS height:50% oder height:auto anzugeben, hilft aber nichts. Gleiches wenn ich im HTML eine Höhe mitgebe.
Was Funktioniert ist eine Feste Höhe im CSS wie height:20em oder so, aber das will ich ja nicht, das soll sich alles, so wie der Rest skalieren, je nach Bildschirmgröße.
Ich hab mal die Bilder Chrome und Firefox angehängt, da wird klar was ich meine. Das Chrome ist deswegen kleiner weil das bild zu groß war und ich es verkleinern musste. gemacht wurden die Bilder in gleicher Größe.
Sorry, wenn ich mich doof ausdrücke. Ich mach normal nichts mit Internetseiten, nur meine eigene hab ich geschrieben und da ist für mich irgendwie kein Weiterkommen.
Danke für die Hilfe 
Ach ja, das Programm mit dem ich das mache heißt HTML-Kit wobei ich die Funktionen nicht nutze sondern einfach den Code eintippe. Sollte das Programm irgendwelche üblichen Fehler haben habe ich die nicht übernommen, weil ich die Programmfunktionen nicht nutze. (dafür mach ich zu wenig mit HTML und CSS als dass ich mich da reinfuchsen würde)
Gruß
