Bildbreite in Absolute-positioniertem Container
ME
- design/layout
Hallo!
Mein Problem ist das folgende:
Ich will ein Bild über ein anderes (höheres, aber schmaleres) schmeißen.
Dafür soll es absolut-positioniert werden und steckt zu diesem Zweck in einem Container. Es soll über die gesamte Breite gehen. Wenn ich aber den Container positionieren, wird das Bild im Firefox auf Originalgröße reduziert. Der IE machts richtig.
Der Code sieht in etwa so aus:
<body style="background-image: url(bg.png); background-repeat: repeat-x;">
<div style="position: absolute"><img src="breitundflach.gif" width=100%></div>
<div align=center><img src="schmalundhoch.jpg" height=100%></div>
</body>
Hi,
Dafür soll es absolut-positioniert werden und steckt zu diesem Zweck in einem Container. Es soll über die gesamte Breite gehen. Wenn ich aber den Container positionieren, wird das Bild im Firefox auf Originalgröße reduziert. Der IE machts richtig.
*seufz* nein, macht er nicht. Bitte trenne *scharf* zwischen "richtig" und "wie gewünscht" - diese beiden Dinge sind radikal unterschiedlich.
<div style="position: absolute"><img src="breitundflach.gif" width=100%></div>
Die Breite eines absolut positionierten Elements richtet sich nach dessen Inhalt. In Folge dessen ergibt es keinen Sinn, dem Inhalt eine Breite zu geben, die sich nach dem umgebenden (also absolut positionierten) Element richtet. Die Katze beißt sich hier in den Schwanz. Zur Lösung des Problems haben derlei Werte innerer Elemente das Verhalten auferlegt bekommen, als wäre der Wert überhaupt nicht angegeben worden. Folge: Das Bild hat die Größe seiner intrinsischen Dimensionen. Jedes andere Verhalten, beispielsweise das des IE, ist vollkommen falsch. Wenn Du möchtest, dass eine andere Größe vorliegt, so gib diese dem Inhalts- oder dem absolut positionierten Element an.
<div align=center><img src="schmalundhoch.jpg" height=100%></div>
Das align-Attribut hat in HTML nichts verloren, <img>-Elemente benötigen *zwingend* ein alt-Attribut. Kleide *alle* Attributwerte in Quotes.
Cheatah
Grundlage für Zitat #940.
Dafür soll es absolut-positioniert werden und steckt zu diesem Zweck in einem Container. Es soll über die gesamte Breite gehen. Wenn ich aber den Container positionieren, wird das Bild im Firefox auf Originalgröße reduziert. Der IE machts richtig.
*seufz* nein, macht er nicht. Bitte trenne *scharf* zwischen "richtig" und "wie gewünscht" - diese beiden Dinge sind radikal unterschiedlich.
Nagut, er machts wie gewünscht.
<div style="position: absolute"><img src="breitundflach.gif" width=100%></div>
Die Breite eines absolut positionierten Elements richtet sich nach dessen Inhalt. In Folge dessen ergibt es keinen Sinn, dem Inhalt eine Breite zu geben, die sich nach dem umgebenden (also absolut positionierten) Element richtet. Die Katze beißt sich hier in den Schwanz. Zur Lösung des Problems haben derlei Werte innerer Elemente das Verhalten auferlegt bekommen, als wäre der Wert überhaupt nicht angegeben worden. Folge: Das Bild hat die Größe seiner intrinsischen Dimensionen. Jedes andere Verhalten, beispielsweise das des IE, ist vollkommen falsch. Wenn Du möchtest, dass eine andere Größe vorliegt, so gib diese dem Inhalts- oder dem absolut positionierten Element an.
Danke für die schnelle und ausführliche Antwort. Leider bin ich jetzt zwar schlauer, aber nicht viel weiter :-(
Ich hab auf diverse Varianten probiert dem Container eine Breite von 100% zuzuordnen (über style="width: 100%" bzw width="100%"), es ändert sich aber nichts. Ich hätte gerne das Bild über die ganze Breite (des Fensters, nicht des Containers).
Ist das irgendwie sauber möglich?
Hi,
Danke für die schnelle und ausführliche Antwort. Leider bin ich jetzt zwar schlauer, aber nicht viel weiter :-(
das macht nichts. Ich gab Dir Beschleunigung, nicht Geschwindigkeit.
Ich hab auf diverse Varianten probiert dem Container eine Breite von 100% zuzuordnen (über style="width: 100%" bzw width="100%"), es ändert sich aber nichts.
Über das testweise Setzen z.B. der Hintergrundfarbe oder eines Rahmens kannst Du kontrollieren, welche Ausmaße das Element hat.
Ich hätte gerne das Bild über die ganze Breite (des Fensters, nicht des Containers).
Ist das irgendwie sauber möglich?
Wenn sich über die Vorfahrenelemente eine Verbindung zwischen Container und Viewport (das meinst Du mit Fenster) knüpfen lässt, dann ja.
Cheatah
Grundlage für Zitat #937.