max-width; max-height funzt net

[Torge]

Hallo an alle,

sorry, aber ich dachte immer mit max-width und max-heigt könnte ich die maximale Seitenlänge eines Bildes z.B. festlegen.

In folgender Schreibweise ignoriert er beide Seitanlängen:
<img src="bild.jpg" style="max-width:50px; max-height:50px;";>

In folgender Weise setzt er die Höhe auf 50px und das Seitenverhältnis bleibt gleich:
<img src="bild.jpg" style="width:50px; max-height:50px;";>

In dieser Weise setzt er die Breite auf 50px und das Seitenverhältnis bleibt gleich:
<img src="bild.jpg" style="max-width:50px; height:50px;";>

Es klappt also nur entweder oder, ich hätte aber gerne beides.
Ist das irgendwie möglich - natürlich ohne Verzerrung?

Danke

Torge

[Beat]

sorry, aber ich dachte immer mit max-width und max-heigt könnte ich die maximale Seitenlänge eines Bildes z.B. festlegen.

In folgender Schreibweise ignoriert er beide Seitanlängen:
<img src="bild.jpg" style="max-width:50px; max-height:50px;";>

In folgender Weise setzt er die Höhe auf 50px und das Seitenverhältnis bleibt gleich:
<img src="bild.jpg" style="width:50px; max-height:50px;";>

In dieser Weise setzt er die Breite auf 50px und das Seitenverhältnis bleibt gleich:
<img src="bild.jpg" style="max-width:50px; height:50px;";>

Es klappt also nur entweder oder, ich hätte aber gerne beides.
Ist das irgendwie möglich - natürlich ohne Verzerrung?

Wenn du nur die eine Richtung angibst, dann wird die andere Richtung proportional angepasst.

Der Sinn von max-width bzw. min-width ist aber anders, als du glaubst.
typischer Weise verwendet man folgendes Schema

width                max-width   min-width
absolute Einheit     relative Eineheiten

oder

width                max-width   min-width
relative Einheit     absolute Einheiten

ein typischer Fall wäre also:
    style="width:100px; max-width:100%; min-width:50%;"
wobei sich die prozentualen Einheiten auf die Breite des Parent-Elements beziehen.

mfg Beat

[Torge]

ein typischer Fall wäre also:
    style="width:100px; max-width:100%; min-width:50%;"
wobei sich die prozentualen Einheiten auf die Breite des Parent-Elements beziehen.

Aber so kann ich doch lediglich NUR die entsprechende Breite festlegen, die nicht überschritten werden darf. Die Höhe kann jetzt ja ins unendlich gehen.

Ich habe halt nur ein Feld von 400x400 Pixeln, indem viele verschiedengroße Bilder dargestellt werden sollen. Demnach muss ich da eine Anpassung vornehmen, sobald die Breite von 400px überschritten wird, ODER aber die Höhe von 400px.

Das muss doch irgendwie möglich sein... - oder?

Gruß

[Hopsel]

Hi Torge!

Das muss doch irgendwie möglich sein... - oder?

Einfache Antwort: Nö!

Detailliertere Antwort: Bedingt!
;-)

Im Firefox 3.0.4 (und Safari 3.1.2 übrigens auch) funktioniert der Einsatz von max-width und -height mit 100%, wenn das Elternelement eine absolute Breite bekommt. Das Bild wird unverzerrt, aber skaliert dargestellt, egal ob es in der Breite oder in der Höhe eine größere Ausdehnung hat.

Allerdings wirst du den Internetexplorer nicht überreden können.

Die einzige sichere Möglichkeit, die ich sehe ist der Einsatz einer serverseitigen Technik, die bewertet, welche Dimensionen das Bild hat und eine entsprechende Höhe (exklusiv-) oder Breite für das Bild festlegt.
Das würde ich über entsprechende Klassen festlegen, die den Bildern nur noch zugewiesen werden müssen:

.max-width { /* für Bilder mit Breite >= Höhe */  
width:100%;  
}  
  
.max-height { /* für Bilder mit Höhe >= Breite */  
height:100%;  
}

Mit Javascript kannst du die Klassen auch ohne vorherige serverseitige Verarbeitung zuweisen. Allerdings halt nicht sicher und unter allen Umständen. Dafür müsstest du alle Elemente des Elterndivs durchlaufen, ggf. prüfen, ob sie Bilder sind und dann eben die entsprechende Klasse zuweisen.

MfG H☼psel

[Torge]

Hey H☼psel,

...mhhh das ist ja alles komplizierter als erwartet.
Kann man denn irgendwie die Länge oder Breite eines Bildes in Pixeln ermitteln? - Wenn ja, wie?

Gruß Torge

[Hopsel]

Hi Torge!

...mhhh das ist ja alles komplizierter als erwartet.

Finde ich eigentlich nicht...

Kann man denn irgendwie die Länge oder Breite eines Bildes in Pixeln ermitteln?

Klar!

Wenn ja, wie?

Unter Windows kannst du dir die Abmessungen im Explorer anzeigen lassen. Fast jedes beliebige Bildprogramm sollte dir ebenfalls diese Daten liefern.

MfG H☼psel

[Torge]

:o)

Unter Windows kannst du dir die Abmessungen im Explorer anzeigen lassen. Fast jedes beliebige Bildprogramm sollte dir ebenfalls diese Daten liefern.

Doch nicht manuell !!

Per script natürlich. Ich will doch nicht jedes Bild, was bei mir hochgeladen wird manuell prüfen und entsprechend anpassen.
Ich hatte einfach die Idee, die längste Seite eines bildes zu bestimmen und entsprechend max-height oder max-width zu nutzen.

Bin aber inzwischen selbst drauf gekommen. Funzt alles.
-------------------------------------------------------------------------
$imagedata = getimagesize("gfx/galerie/$id/$file");
$breit=$imagedata[0];
$hoch=$imagedata[1];
if ($breit<$hoch)
   {
   echo"<img src="gfx/galerie/$id/$file" style="max-height:100px;">";
   }
else
   {
   echo"<img src="gfx/galerie/$id/$file" style="max-width:100px;">";
   }
-------------------------------------------------------------------------

Gruß Torge

[Gunnar Bittersmann]

@@Hopsel:

Im Firefox 3.0.4 (und Safari 3.1.2 übrigens auch) funktioniert der Einsatz von max-width und -height mit 100%, wenn das Elternelement eine absolute Breite bekommt. Das Bild wird unverzerrt, aber skaliert dargestellt, egal ob es in der Breite oder in der Höhe eine größere Ausdehnung hat.

Allerdings wirst du den Internetexplorer nicht überreden können.

Den IE 7 überzeugt das durchaus.

Und auch der IE 6 lässt sich überreden: mit JScript!!

* html img  
{  
    width: expression([code lang=javascript](Math.min(parseFloat(this.parentElement.currentStyle.width)/this.width, parseFloat(this.parentElement.currentStyle.height)/this.height) * this.width) + "px"
~~~);  
    height: expression(`(Math.min(parseFloat(this.parentElement.currentStyle.width)/this.width, parseFloat(this.parentElement.currentStyle.height)/this.height) * this.height) + "px"`{:.language-javascript});  
}[/code]  
  
  

> Die einzige sichere Möglichkeit, die ich sehe ist der Einsatz einer serverseitigen Technik,  
  
Nicht nötig. Clients schaffen das allein.  
  
Live long and prosper,  
Gunnar

-- 
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)

[Hopsel]

Hi Gunnar!

Den IE 7 überzeugt das durchaus.

Tatsächlich. Irgendwas ist da bei meinem Test wohl schiefgelaufen.

Und auch der IE 6 lässt sich überreden: mit JScript!!
[...]

Die einzige sichere Möglichkeit, die ich sehe ist der Einsatz einer serverseitigen Technik,
Nicht nötig. Clients schaffen das allein.

Also ich sehe da einen Widerspruch. JScript ordne ich nicht unter einer sicheren Möglichkeit ein!

MfG H☼psel