Ein Bild (200 x 50) auf 75x75 Pixel bringen, ohne es zu verzerren
lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess
auswahl
bereich
bild
bildausschnitt
breite hhe
center
ecken
folgende informationen
gedacht
hhen
irgendetwas
ladezeit
lsung
mache
margin
overflow
skript
verstehe
versuch
verzerrung
-
Hallo Leute
Ich möchte meine Bildergalerie etwas verbessern. So wie sie jetzt ist, ist sie zwar auch ganz gut, aber die Miniaturansichten sind verzerrt. Jetzt möchte ich die Struktur so wie sie ist behalten, also dass alle Bilder die gleichen maße haben, aber nicht mehr verzerrt sind. Ich hab mir gedacht, dass man eventuell nur Bildausschnitte zeigen könnte, vllt "Mitte oben" diesen Bildausschnitt. bis jetzt habe ich nur eine Methode, bei der ich die Breite angebe, und die neue Höhe ausgerechnet wird... das sieht aber alles etwas unförmig aus, wenn ich diese Methode verwende. Könntet ihr mir da etwas weiterhelfen?
Gruß
Technofan -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du könntest ja versuchen, den größeren Wert auf 75px zu bekommen und den kleineren dann entsprechend zu skalieren, so dass du dann also ein Rechteck hättest.
-
ja ne, dann hab ich ja wieder ne verzerrung... ich hab mir gerade überlegt, ob ich das nicht mit divs mache... und dann overflow=hidden oda so, aber dann hab ich ja nur oben links die Ecke, das will ich ja auch net...
-
ja, da sehe ich auch keine andere lösung
als jedes bild einzeln zu bearebeiten...uppen ...verlinken ;) -
ich mach das bei meinem Resize skript einfach so:
$size = getimagesize($file); $maxl = 75; // DIe gewünschte längste Seite des Thumbnails if($size[0] > $size[1]) { $breite = $maxl; $hoehe = Round(($size[1]/$size[0])*$maxl); $altesBild=ImageCreateFromJPEG($file); $neuesBild=imagecreatetruecolor($breite,$hoehe); ImageCopyResampled($neuesBild,$altesBild,0,0,0,0,$breite,$hoehe,$size[0],$size[1]); ImageJPEG($neuesBild,$thumb_file); }elseif($size[0] < $size[1]) { $hoehe = $maxl; $breite = Round(($size[0]/$size[1])*$maxl); $altesBild=ImageCreateFromJPEG($file); $neuesBild=imagecreatetruecolor($breite,$hoehe); ImageCopyResampled($neuesBild,$altesBild,0,0,0,0,$breite,$hoehe,$size[0],$size[1]); ImageJPEG($neuesBild,$thumb_file); }else{ $hoehe = $maxl; $breite = $maxl; $altesBild=ImageCreateFromJPEG($file); $neuesBild=imagecreatetruecolor($breite,$hoehe); ImageCopyResampled($neuesBild,$altesBild,0,0,0,0,$breite,$hoehe,$size[0],$size[1]); ImageJPEG($neuesBild,$thumb_file); } -
ja ne, dann hab ich ja wieder ne verzerrung... ich hab mir gerade überlegt, ob ich das nicht mit divs mache... und dann overflow=hidden oda so, aber dann hab ich ja nur oben links die Ecke, das will ich ja auch net...
Die kleiner seite auf 75px bringen, dann hast du ein Bild von 300x75 oder 75x150 oder was auch immer und dann overflow:hidden und text-align:center und vertical-align:middle.
Aber es muss doch eine Funktion geben, die Bilder "beschneidet"... (?)
Ach ja.. Bilder Vergrößern ist ja nu auch nihct so der Brüller. Wenn alle Bilder 200x50 haben würde ich sie auf 50x50 resizen. -
ich mach das bei meinem Resize skript einfach so:
$size = getimagesize($file); $maxl = 75; // DIe gewünschte längste Seite des Thumbnails if($size[0] > $size[1]) { $breite = $maxl; $hoehe = Round(($size[1]/$size[0])*$maxl); $altesBild=ImageCreateFromJPEG($file); $neuesBild=imagecreatetruecolor($breite,$hoehe); ImageCopyResampled($neuesBild,$altesBild,0,0,0,0,$breite,$hoehe,$size[0],$size[1]); ImageJPEG($neuesBild,$thumb_file); }elseif($size[0] < $size[1]) { $hoehe = $maxl; $breite = Round(($size[0]/$size[1])*$maxl); $altesBild=ImageCreateFromJPEG($file); $neuesBild=imagecreatetruecolor($breite,$hoehe); ImageCopyResampled($neuesBild,$altesBild,0,0,0,0,$breite,$hoehe,$size[0],$size[1]); ImageJPEG($neuesBild,$thumb_file); }else{ $hoehe = $maxl; $breite = $maxl; $altesBild=ImageCreateFromJPEG($file); $neuesBild=imagecreatetruecolor($breite,$hoehe); ImageCopyResampled($neuesBild,$altesBild,0,0,0,0,$breite,$hoehe,$size[0],$size[1]); ImageJPEG($neuesBild,$thumb_file); }
Ja ne, das Script habe ich auch ^^ aber dann habe ich nix gleichmäßiges... Die Lösung von tibel scheint mir bis jetzt eine gute zu sein, werde ich mal machen... hab garnet dran gedacht, dass man die rezizen kann XD -
Hi,
also grundsätzlich! Du kannst ein Bild von 200 x 50 nicht auf 75 ² bringen ohne es zu verzerren. Das funktioniert rein technisch schon gar nicht ... das ist so als würdest du versuchen ein A4 blatt auf die halbe länge zu bekommen ohne die Propationen zu ändern! Das einzige was du machen kannst ist ... entweder eben auf 300 * 75 vergrößern ... oder das bild auf 75*15 (ca) zu verkleinern somit wären beide kleiner gleich 75px. Das ist sogar mit HTML bezw. CSS verwirklich bar, darauf wurde ich letztens von einem Freund von mir aufmekrsam gemacht. style="max-height:75px; max-width:75px;" damit müsste das problem ganz einfach gelöst werden können! Die idee mit den Scrollbalken finde ich persönlich extrem hässlich!
lg Sir7 -
von max-height und max-width würde ich abraten, weil der IE diese nicht unterstützt.
genauso, wie min-width und min-height.
aber ansonsten kann ich sirsven nur zustimmen.
ein Bild kannst du nicht ohne veränderungen auf eine der Proportionen nicht entsprechende größe bringen. -
Außerdem würde ich Bilder IMMER in Originalgröße anzeigen. Sprich ein 1600x1200 Bild in 50x30 px anzuzeigen ist sinnlos und dumm. Dann sollte man wirklich mit richtigen Thumbnails arbeiten...
...wie technofan es vorhat. Und er will ja auch gar nicht das ganze Bild zeigen, sondern ein unverzehrtes, quadratisches Bild, sprich (wie auch schon gesagt) einen Ausschnitt. Dazu lässt sich overflow:hidden missbrauchen, denn dabei entstehen eben KEINE srollbalken.
Weitere Lösungssvorschläge sind sicherlich willkommen aber vorher LESEN und INFORMIEREN.
+
PS: Mir ist noch keine bessere Lösung eingefallen ;) -
$size = getimagesize($file); $maxl = 75; // Die gewünschte längste Seite des Thumbnails $x = 0; $y = 0; if($size[0] > $size[1]) { $breite = Round(($size[0]/$size[1])*$maxl); $hoehe = $maxl; $x = Round($breite - $maxl) * Round($size[0] / $size[1]) / 2; }elseif($size[0] < $size[1]) { $breite = $maxl; $hoehe = Round(($size[1] / $size[0]) * $maxl); $y = Round($hoehe - $maxl) * Round($size[1] / $size[0]) / 2; }else{ $breite = $maxl; $hoehe = $maxl; } $altesBild=ImageCreateFromJPEG($file); $neuesBild=imagecreatetruecolor($maxl,$maxl); ImageCopyResampled($neuesBild,$altesBild,0,0,$x,$y,$breite,$hoehe,$size[0],$size[1]); ImageJPEG($neuesBild,$thumb_file);
Ungeprüft, aber sollte funktionieren
Beitrag geändert: 25.8.2007 15:23:37 von sos-webdesign -
okay, ich hab jetzt ne bessere Idee ^^
also, ich hab das mit den Divs gemacht, und damit man das Bild im Thimbnail trozdem komplett sehen kann, hab ich jetzt via CSS nen Hover gemacht, der den Overflow anzeigt... nur leider macht der IE das net XD... hier mal meine Klasse:
.bildflow {
height: 75px;
width: 75px;
overflow: hidden;
position: relative;
text-align: center;
vertical-align: middle;
float: left;
z-index: 0;
margin-left: 8px;
margin-right: 8px;
margin-top: 8px;
margin-bottom: 8px;
}
.bildflow:hover {
overflow:visible;
z-index: 1;
}
so... der z-index ist dafür da, dass das aktuelle Bild, auf dem sich die Maus befindet, die anderen überlappt... klapt überall wunderbar, nur im IE halt net... was kann man denn da machen? -
Also um die Bilder zu zentrieren empfehle ich folgendes, da es mit text-align: center; vertical-align: middle; ja nicht funktioniert. Für meine möglichkeit, muss das aber für jedes bild extra angegeben werden (also am besten mit php) und zwar bei dem <img> in den style-Teil:
position:absolute;
left:50%;
top:50%;
width:Bildweite in px;
height:Bildhöhe in px;
margin-left:-Bildweite/2 in px;
margin-top:-Bildhöhe/2 in px;
Aber ein Problem im IE ist mir nicht aufgefallen, vllt verwendest du ja eine ältere Version. -
Ich finde die Lösung nicht gut, da so dass Bil geladen aber gar nicht richtig angezeigt wird. Somit entstehen nur unnötig mehr Ladezeiten.
Ich verstehe einfach nicht, warum du nicht einen Bereich aus dem Bild ausschneidest und als neues Bild abspeicherst...
Folgende Informationen sollten eigentlich reichen. Bei der Auswahl des Bereichs kannst du dir natürlich irgendetwas aussuchen.
http://www.php.net/manual/de/function.imagecopy.php -
i-spacke schrieb:
Ich finde die Lösung nicht gut, da so dass Bil geladen aber gar nicht richtig angezeigt wird. Somit entstehen nur unnötig mehr Ladezeiten.
Ich verstehe einfach nicht, warum du nicht einen Bereich aus dem Bild ausschneidest und als neues Bild abspeicherst...
Folgende Informationen sollten eigentlich reichen. Bei der Auswahl des Bereichs kannst du dir natürlich irgendetwas aussuchen.
http://www.php.net/manual/de/function.imagecopy.php
Nichts anderes macht mein Script, welches ich zuvor schon gepostet habe
-
joa, aber ihr müsst das mal so sehen... ich schrumpfe die Bilder ja eh schon auf die entsprechende breite, mit dazugehöriger Höhe, dadurch gehen ja schonmal einpaar KB wech und man sieht das ganze Bild. Wenn ich jetzt aber NUR einen Teilbereich nehme, kann es passieren, dass die eigentliche Handling einfach weggeschnitten wird. Deswegen finde ich meine/die von tibel eigentlich am besten, und bis auf den IE6 der ja bald eh vergangenheit sein wird unterstützen das alle Browser, der IE7 macht soweit alles richtig... ja, auch Microdoof passt sich so langsam aber allmählich den Standards an. ^^
der IE7 ist zwar immernoch doof und mehr oder weniger abgeguckt, aber eigentlich auch schon ganz ok... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
