Firefox: Bild skalieren mit max-width

M

mehirc

Mitglied
Hallo,

ich habe unterschiedlich große Bilder, die in einem DIV-Bereich angezeigt werden sollen. Nun hätte ich gerne, dass ein Bild maximal den Bereich des DIV ausfüllt, egal wie groß es ist.

Wähle ich für das Bild width:100%, wird alles korrekt ausgefüllt, nur leider auch bei Bildern, die eigentlich kleiner sind und nicht hochskaliert werden sollen.

Das was ich möchte, müsste ja eigentlich mit max-width:100% gehen. Im IE7 klappt das auch prima, Firefox scheint das aber falsch zu verstehen und zeigt das Bild immer in voller Größe.

Gibt es dafür irgendeine Lösung? Konnte leider nichts finden.

Gruß,
Michael
 
mehirc hat gesagt.:
Wähle ich für das Bild width:100%, wird alles korrekt ausgefüllt, nur leider auch bei Bildern, die eigentlich kleiner sind und nicht hochskaliert werden sollen.
Zum Vergrößern anklicken....
Hi,

dann formatier speziell dieses Bild, um die übrigen Grafikelemente von dieser CSS-Regel auszuschliessen. Im Einzelfall mit einem eindeutigen ID-Bezeichner, bei einer Gruppe von Bildern mit einem Klassenbezeichner.

mfg Maik
 
Maik hat gesagt.:
Hi,

dann formatiere speziell dieses Bild, um die übrigen Grafikelemente von dieser CSS-Regel auszuschliessen. Im Einzelfall mit einem eindeutigen ID-Bezeichner, bei einer Gruppe von Bildern mit einem Klassenbezeichner.

mfg Maik
Zum Vergrößern anklicken....

Hi,

sorry hab ich vergessen zu erwähnen, ich kenn die Größe der Bilder leider nicht, die liegen nicht auf dem Webserver.

Aber danke für die Anregung, wenn es wirklich gar nicht anders geht, dann hätte ich auch die Möglichkeit die Größe im Vorfeld zu speichern, wäre nur etwas unschön.

Gruß,
Michael
 
Und was hat die Spezifizierung der CSS-Regel auf ein bestimmtes Grafikelement mit seiner Bildgröße (Auflösung,Dimension) zu tun?

mfg Maik
 
Maik hat gesagt.:
Und was hat die Spezifizierung der CSS-Regel auf ein bestimmtes Grafikelement mit seiner Bildgröße (Auflösung,Dimension) zu tun?

mfg Maik
Zum Vergrößern anklicken....

Hi Maik,

Wir reden glaube ich aneinander vorbei. Es gibt bei dem Problem nur ein Grafikelement. Wenn ich von den Bildern rede, dann meine ich die Bilder die alle in dem einen Grafikelement als source geladen werden können.

Alle Bilder die kleiner als der DIV Bereich sind, sollen so bleiben wie sie sind, aber alle die größer sind, sollen in der Ansicht auf den DIV-Bereich runterskaliert werden, damit sich der Bereich nicht vergößert und das Layout durcheinander bringt.

Wenn ich jetzt die Größen kennen würde, könnte ich die Klasse des Grafikelements dynamisch anpassen (PHP) um mein Ziel zu erreichen. Dann würde ich, sobald das Bild breiter als der Bereich ist, das Grafikelement auf width:100% setzen (was ja wie im ersten Post gesagt, funktioniert) und den Rest normal anzeigen lassen, da er auf jeden Fall reinpasst. Aber da fällt mir ein, dass der Bereich ja ebenfalls in der Breite variieren kann...also geht das auch nicht wirklich.

Also wenn width:100% das Bild genau an das DIV anpasst, erwarte ich eigentlich, dass max-width:100% das Bild maximal so groß wie das DIV anzeigt, was aber leider nicht der Fall ist. Deshalb denke ich mal das ist ein Fehler von Firefox.

Gruß,
Michael
 
Danke für deine Hilfe, ich hab mir jetzt nochmal genauer angeguckt was da alles bei mir drumherum steht.

Ich muss leider zugeben, dass ich eine Tabelle für meine Struktur verwende und genau da liegt wohl das Problem. Da bin ich sicher selbst schuld bei so einer Konstruktion, aber auch da sollte man eigentlich erwarten können, dass sich max-width:100% an width:100% orientiert.

Jetzt hab ich mal eine Demo von meiner Struktur erstellt und angehängt, vielleicht fällt dazu ja noch was ein.

Es ist schon lustig, im FF3 geht width:100%, aber max-width:100% nicht, im IE7 dagegen geht max-width:100%, aber width:100% nicht.

Gruß,
Michael
 

Anhänge

Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück