Thumb készítése fix szélleség és magasság.
Nem ismer valaki classt vagy vaalamit ami átmértetezi a képet és a többit kitőlti pl fehérre.
Pl van egy kép 800x600 ezt szeretém egy 150x150 es képbe tenni, és legyen középen. A gond az, hogy ha 150x150 re méretezem át akkor torz lesz ha meg a pl 150 szélesre akkor kissebb lesz a kép. 150x112.
re: Thumb készítése fix szélleség és magasság.
Miért nem raksz a thumbnail köré egy div-t aminek fehér a háttérszíne? Akkor nem torzul a kép és a div hátterre tölti ki a hiányzó részt.
re: Thumb készítése fix szélleség és magasság.
Végul is jó így is, csak így kell egy nagy a tag ami lefedi az egész DIV et, és nem tudom mennyire helyes.
re: Thumb készítése fix szélleség és magasság.
így lehetne talán, css:
Kód:
.thumbbox {
width: 110px;
height: 110px;
display: inline-block;
text-align: center;
background-color: #fff;
float: left;
}
.thumbbox img { width:100px;}
.v-outer {
display: table;
#position: relative;
overflow: hidden;
height: 115px;
width: 100%;
}
.v-middle {
display: table-cell;
#position: absolute;
#top: 50%;
vertical-align: middle;
}
.v-inner {
#position: relative;
#top: -50%;
}
html:
Kód:
<div class="thumbbox"><div class="v-outer"><div class="v-middle"><div class="v-inner">"<img src="kep.jpg" /></div></div></div></div>
re: Thumb készítése fix szélleség és magasság.
http://wiki.github.com/masterexplode...mb/basic-usage
Itt pedig az adaptive resize funkciót ajánlom.
Mindig pixelre pontosan ugyan olyan képet ad mint amit beálítottál. Nem torzitja a képet. Egyszerüen kivágja a közepéből a megfelelő méretü eredetit, majd lekicsinyíti. Jó cucc, én már használom egy ideje.
re: Thumb készítése fix szélleség és magasság.
Az biztos, hogy a legjobb ha a képet már program bevágja felküldésnél. Nagy képet lekicsinyíteni html-el nem egészséges. Az imagemagick olyat is tud, hogy egy tetszőleges háttérszínű négyzetbe rakja bele a képet torzítás és vágás nélkül.
re: Thumb készítése fix szélleség és magasság.
MAG-gal értek egyet, nem túl szép és jó megoldás, hogy pl. 800x600-as képet tölt le 100px-es méretre, és böngésző kicsinyíti. Ez alapjában az oldal betöltődést is lassítja, és felesleges. HTML és CSS trükközés kerülendő.
Több jó ötlet is elhangzott, de az alap GD modul is elég jól alkalmazható ilyen feladatra.
-getimagesize-al bekéred a kép méretét
-átszámolod magadnak mekkora legyen az oldalaránytartó kép
-aztán módosítod, vagy másolod
re: Thumb készítése fix szélleség és magasság.
Pont erre írtam a napokban egy kis scriptet. Megkeresi legnagyobb területet az eredeti képben az új arányoknak megfelelően, majd kivágja azt és készít belőle újat. Nagyon béta, bőven van még rajta mit fejleszteni. Ja, és egyelőre csak a jpg-et méretezi át, de a switchnél be tudsz írni további fájltípusokat.
Templétből használhatod, így:
HTML kód:
<img src="/atmeretez.php?file=kep.jpg&h=90&w=180" alt="ne feledtezz meg az alt címről"/>
Ahol file a kép neve, h az új magasság és w az új szélesség.
Ez pedig az atmaretez.php:
PHP kód:
$filename=$_GET['file'];
$w=$_GET['w'];
$h=$_GET['h'];
$info=getimagesize('./images/'.$filename);
$orig_w=$info[0];
$orig_h=$info[1];
$mime=$info['mime'];
switch($mime)
{
case 'image/jpeg':
$old=imagecreatefromjpeg('./images/'.$filename);
$new=imagecreatetruecolor($w,$h);
break;
}
$orig_ar=$orig_w/$orig_h;
$new_ar=$w/$h;
if ($new_ar > $orig_ar)
{
$ratio=$w/$orig_w;
$tmp_h=$h/$ratio;
$crop_y=($orig_h-$tmp_h)/2;
imagecopyresampled ( $new , $old,
0, 0,
0, $crop_y,
$w, $h,
$orig_w, $tmp_h);
}
if ($new_ar < $orig_ar)
{
$ratio=$h/$orig_h;
$tmp_w=$w/$ratio;
$crop_x=($orig_w-$tmp_w)/2;
imagecopyresampled ( $new , $old,
0, 0,
$crop_x, 0,
$w, $h,
$tmp_w, $orig_h);
}
header("Content-Type: ".$mime);
$result=imagejpeg($new, NULL, 75);
re: Thumb készítése fix szélleség és magasság.
Idézet:
neils eredeti hozzászólása
Pont erre írtam a napokban egy kis scriptet. Megkeresi legnagyobb területet az eredeti képben az új arányoknak megfelelően, majd kivágja azt és készít belőle újat. Nagyon béta, bőven van még rajta mit fejleszteni. Ja, és egyelőre csak a jpg-et méretezi át, de a switchnél be tudsz írni további fájltípusokat.
Templétből használhatod, így:
HTML kód:
<img src="/atmeretez.php?file=kep.jpg&h=90&w=180" alt="ne feledtezz meg az alt címről"/>
Ahol file a kép neve, h az új magasság és w az új szélesség.
Ez pedig az atmaretez.php:
azért ez ebben a formában kemény. a gd qrva sok erőforrást eszik és ha te minden oldalletöltésnél méretezteted vele a képet akkor az kellemes lehet a szervernek. képet lehetőleg a feltöltésnél kell méretezni, akkor is ha van imagick én azt javaslom, mert egyszerűbb és kevesebb erőforrást igényel.
itt a példa erre : http://valokuva.org/?p=92
re: Thumb készítése fix szélleség és magasság.
Ne haragudj neils de ha egy ilyet találok a szerveren egy kicsit is látogatottabb lapon már fogom a fejem. Minden lap lekérésnél átméretezni azt a szerencsétlen képet.. legalább egy cache-t raktál volna bele.