Bilder skalieren

[Tobias]

Hallo,
um Bilder dynamisch an den vorhandenen Platz zu skalieren verwend ich folgendes:

  
#container {  
	max-width: 20em;  
}  
  
img {  
	max-width: 100%;  
}  

  
<div id="container">  
	<img src="bild.jpg" width="600" alt="">  
	und hier noch Text  
</div>  

Funktioniert auch so weit gut. Jetzt will ich den Container aber rechts floaten. Füge ich ein float:right hinzu wird nicht mehr skaliert.

Wieso? Und wie funktionierts richtig?

Tschau

Tobias

[dave]

Hi,

nicht nachvollziehbar.

~dave

[1UnitedPower]

nicht nachvollziehbar.

Dein Beispiel funktioniert weder mit Firefox 15, noch mit IE9 ist also nicht unbedingt praxistauglich.

[dave]

Hi,

Dein Beispiel funktioniert weder mit Firefox 15, noch mit IE9 ist also nicht unbedingt praxistauglich.

Falls du mit "funktioniert nicht" das Verhalten bei kleinen Viewports meinst: stimmt. Jetzt kann ich auch endlich nachvollziehen was nicht passt, hatte mir das nur mit Chrome angesehen.

Eine andere Lösung als die mittels relativer Breitenangabe konnte ich auf die schnelle jetzt auch nicht finden. Meiner Meinung nach ein Bug.

Bei ausreichend Großen Viewports "funktionierts" bei mir aber sehr wohl in IE9 und Firefox 15, bei dir nicht?

~dave

[Tobias]

Hallo,
schön das du mein Problem inzwischen nachvollziehen konntest. :)

Eine andere Lösung als die mittels relativer Breitenangabe konnte ich auf die schnelle jetzt auch nicht finden. Meiner Meinung nach ein Bug.

Hm, schön wärs. Ich hab das jetzt mit Firefox 15, Opera 12 und Midori ausprobiert. Überall das gleiche Verhalten. Daher gehe ich erstmal davon aus, dass das so gewollt ist. :(

Bei ausreichend Großen Viewports "funktionierts" bei mir aber sehr wohl in IE9 und Firefox 15, bei dir nicht?

Ja, bei ausreichender Größe funktioniert es. Mir geht's aber gerade darum, was passiert wenn der Viewport kleiner wird.

Tschau

Tobias

[dave]

Hi,

Ja, bei ausreichender Größe funktioniert es. Mir geht's aber gerade darum, was passiert wenn der Viewport kleiner wird.

Ging für mich aus deinem Eingangspost nicht heraus.

~dave

[Gunnar Bittersmann]

@@Tobias:

nuqneH

<img src="bild.jpg" width="600" alt="">

Was soll @width da, wenn du das Bild skalieren willst?

Füge ich ein float:right hinzu wird nicht mehr skaliert.

Kann ich nicht nachvollziehen. Link zur problematischen Seite?

Qapla'

[dave]

Hi,

<img src="bild.jpg" width="600" alt="">  

Was soll @width da, wenn du das Bild skalieren willst?

Ich füge normalerweise bei Bildern auch immer das height- und width-Attribut dazu, um bei längeren Ladezeiten der Bilder "rumhüpfen" des restlichen Inhaltes zu vermeiden.

Ich habe mir bei dieser Praxis noch nie Gedanken gemacht, was passiert wenn ich das Ganze in Kombination mit max-width: 100%; mache.

Rein aus dem Bauch raus würde ich es auch in diesem Fall für sinnvoll halten, spricht etwas dagegen?

~dave

[Tobias]

Hallo,

Was soll @width da, wenn du das Bild skalieren willst?

im Grunde genommen wird das Workaround für Typo3. Dort lassen sich nicht so ohne weiteres relative Größe für Bilder eingeben und das width-Attribut wird immer automatisch eingefügt

Füge ich ein float:right hinzu wird nicht mehr skaliert.

Kann ich nicht nachvollziehen.

Verkleinere mal den Viewport. Ohne float wird das Bild automatisch auf diesen verkleinert, sollte der Viewport kleiner werden als in max-width für den Container angegeben. Mit float bleibt Container so groß wir in max-width angegeben.

Tschau

Tobias

[Tobias]

Hallo,
hab jetzt rausgefunden wie's geht: Ich muss dem gefloatet Objekt zusätzlich nich eine relative Breite (z.B. 25%) angeben, dann geht's dort auch.

Warum das bei nicht-gefloateten Objekten nicht nötig, verstehe ich allerdings noch nicht so ganz.

Tschau

Tobias

[Tobias]

Hallo,

hab jetzt rausgefunden wie's geht: Ich muss dem gefloatet Objekt zusätzlich nich eine relative Breite (z.B. 25%) angeben, dann geht's dort auch.

Das sollte natürlich "noch eine relative Breite" heißen.

Generell wäre ich aber an einer Lösung interessiert wo das nicht notwendig ist.

Tschau

Tobias

[1UnitedPower]

Generell wäre ich aber an einer Lösung interessiert wo das nicht notwendig ist.

Ich habe einmal daves fiddle überarbeitet und siehe da

[Tobias]

Hallo,

Ich habe einmal daves fiddle überarbeitet und siehe da

*grml* Hab jetzt den Fehler in meiner Testdatei gefunden. Aus irgend nen grund hab ich oberhalb von <body> angefangen zu tippen *autsch*

Danke euch. Jetzt muss ich das nur noch irgendwie in Typo3 reinkriegen. Durch die ganzen zusätzlichen div's die er mir reinhaut stimmt da auch irgendwas noch nicht.

Tschau

Tobias

[dave]

Hi,

Verkleinere mal den Viewport. Ohne float wird das Bild automatisch auf diesen verkleinert, sollte der Viewport kleiner werden als in max-width für den Container angegeben. Mit float bleibt Container so groß wir in max-width angegeben.

Bei welchem Beispiel denn?
Bei dem von mir?
Warum antwortest du dann nicht auf mich?

Wenn ich bei meinem Beispiel den Viewport kleiner mache, wird auch das Bild kleiner.

Nicht nachvollziehbar.

Vielleicht wäre der richtige Zeitpunkt eine Schritt-für-Schritt Anleitung zu geben wie ich dein Problem zu Gesicht bekommen.

~dave