Image prozentual vergrössern!?

[Steve]

Hallo Leute!

ich versuchte gerade ein image prozentual zu vergrössern:
<img src="bla" width="150%">
musste aber feststellen das es irgendwie so nicht geht.
Gut, ich könnte jetzt das Bild mit getimagesize auslesen und rechnerisch vergrössern, aber das fördert ja nicht gerade die geschwindigkeit der Seite. müsste doch irgendwie machbar sein, das bild um einen festen Factor zu vergrössern.

Hintergrund:
Content/Nachrichten-System mit hochgeladenen Bildern.
Die 1 Nachricht wird etwas grösser dargestellt, nun soll auch das Bild ca 150% größer (gestreckt) dargestellt werden, wenn möglich ohne Rechenaufwand.

Ideen?

[Michael]

Hi!
Versuche es mit CSS und PHP.

Zuerst schreibst du bei jedem Bild, das später einmal vergrößert werden soll, <img src="bild.jpg" class="klein">

Definiere in CSS img.klein { gib die höhe und breite an }
und img.groß { hier einfach größere pixelangaben }

Mit PHP schreibst du dann (ich kenn mich noch nicht so aus), dass wenn der Link <a href="#">Bild vergrößern</a> angeklickt wird, sich die image class von klein auf groß ändert.
Wie du das mit PHP genau codest, weiß ich auch nicht.

MfG

[Steve]

hmmm, jain!

Die Bilder sind natürlich immer verschieden gross, also is nix mit absuluten Werten. Theoretisch müsste es einfach

width="150%" heisen (nur das %-werte irgendwie nicht gehen)

also jedes Bild (egal was kommt) um das 1,5-fache zoomen.

derzeit hab ichs so gelöst:

$size = GetImageSize($img1_url);
$width = $size[0]*1.5;
$img_tag = '<img src=$img1_url width=$width>';

nur wird jetzt jedes bild ausgelesen und berechnet, und das würde ich gerne vermeiden um ladezeiten zu sparen.

[egal]

nur wird jetzt jedes bild ausgelesen und berechnet, und das würde ich gerne vermeiden um ladezeiten zu sparen.

Wieso denn jedes? Ich dachte nur das erste?

[wiberg]

Also meine Idee wäre eher, einfach mit CSS eine höhere Breite anzugeben, als es in Wirklichkeit hat. Die meisten Browser reagieren daruaf mit einer relativen Vergrößerung sowohl in der Höhe, als auch in der Breite. Aber nicht alle... Ich wüsste gern mal, wie da die Spezifikationen genau sind. Wenn du aber das Bild dynamisch vergrößern willst, geht an JavaScript wohl kaum ein Weg vorbei. Mit PHP finde ich etwas Brechstange..

[Steve]

Also meine Idee wäre eher, einfach mit CSS eine höhere Breite anzugeben, als es in Wirklichkeit hat.

aber wie??
wenn ich immer 100px breit bin, gut, dann einfach 200px angeben.
aber das 1Bild ist zB. 100px breit das nächste nur 30px. Wenn ich nun zB 150px angebe ist das fürs 1 Bild gut, aber fürs 2 zuviel.
müsste dynamisch sein.

Die meisten Browser reagieren daruaf mit einer relativen Vergrößerung sowohl in der Höhe, als auch in der Breite. Aber nicht alle... Ich wüsste gern mal, wie da die Spezifikationen genau sind.
also mit Firefox + mozilla + ie6 gehts.

Wenn du aber das Bild dynamisch vergrößern willst, geht an JavaScript wohl kaum ein Weg vorbei. Mit PHP finde ich etwas Brechstange..
ist nicht soooo schlimm, da das Contentsystem sowieso php is.

[Tobias Kloth]

Hallo Steve,

ich versuchte gerade ein image prozentual zu vergrössern:
<img src="bla" width="150%">
musste aber feststellen das es irgendwie so nicht geht.

die 150% beziehen sich auf die Breite des Elternelements - und das ist vermutlich nicht genau die Bildgröße. Ich würde die Bilder aber sowieso nicht im Browser vergrößern lassen - sie sehen sonst grausam aus ...

Content/Nachrichten-System mit hochgeladenen Bildern.
Die 1 Nachricht wird etwas grösser dargestellt, nun soll auch das Bild ca 150% größer (gestreckt) dargestellt werden, wenn möglich ohne Rechenaufwand.
Ideen?

versteh ich das richtig: du hast mehrere Nachrichten untereinander, von denen die erste einschließlich Bild etwas größer ist. Wenn eine neue Nachricht dazukommt, rutscht die erste nach unten und wird wieder kleiner und die neue Nachricht ist die Größere, richtig?
In dem Fall könntest du es so machen, dass du beim Hochladen zwei Bilder abspeicherst - eines in der Originalgröße und eines mit 150% der Originalbreite (per php generiert). Solange eine Nachricht dann ganz oben steht, bindest du das größere Bild ein und wenn eine neue Nachricht dazukommt, eben das kleinere. Um nicht immer zwei Bilder rumliegen zu haben, löschst du das große Bild sobald eine neue Nachricht dazukommt bzw. ersetzt es durch das große Bild der neuen Nachricht.

Grüße aus Nürnberg
Tobias