Oldal: 1 / 2 12 UtolsóUtolsó
Eredmény: 1 - 10 (17) összesen

Téma: Thumb készítése fix szélleség és magasság.

  1. #1
    Hekker 0xFF logója
    Csatlakozott
    09-08-21
    Hozzászólás
    1.079
    Begyűjtött 168 köszönetet
    118 hozzászólásával

    Alapbeállítás 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.



  2. #2
    Bölcs Harder logója
    Csatlakozott
    07-05-05
    Hely
    Budapest
    Hozzászólás
    1.874
    Begyűjtött 169 köszönetet
    110 hozzászólásával

    Alapbeállítás 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.



  3. #3
    Hekker 0xFF logója
    Csatlakozott
    09-08-21
    Hozzászólás
    1.079
    Begyűjtött 168 köszönetet
    118 hozzászólásával

    Alapbeállítás 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.



  4. #4
    MAG
    MAG nem elérhető
    Bölcs MAG logója
    Csatlakozott
    08-08-15
    Hozzászólás
    578
    Thanked 1 Time in 1 Post

    Alapbeállítás 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>




  5. #5
    Bölcs
    Csatlakozott
    07-08-28
    Hozzászólás
    1.030
    Begyűjtött 150 köszönetet
    109 hozzászólásával

    Alapbeállítás 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.



  6. #6
    MAG
    MAG nem elérhető
    Bölcs MAG logója
    Csatlakozott
    08-08-15
    Hozzászólás
    578
    Thanked 1 Time in 1 Post

    Alapbeállítás 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.



  7. #7
    Bölcs
    Csatlakozott
    09-08-20
    Hozzászólás
    524
    Begyűjtött 47 köszönetet
    39 hozzászólásával

    Alapbeállítás 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



  8. #8
    Új tag
    Csatlakozott
    10-04-30
    Hozzászólás
    20
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás 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,
                                
    00,
                                
    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,
                                
    00,
                                
    $crop_x0,
                                
    $w$h,
                                
    $tmp_w$orig_h);
                }
            
            
            
    header("Content-Type: ".$mime);
            
    $result=imagejpeg($newNULL75); 




  9. #9
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.744
    Begyűjtött 1.428 köszönetet
    892 hozzászólásával

    Alapbeállítás re: Thumb készítése fix szélleség és magasság.

    Idézet neils eredeti hozzászólása Hozzászólás megtekintése
    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


    If debugging is the process of removing software bugs, then programming must be the process of putting them in.
    Ruby blog
    Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime.
    Respect all, fear none

  10. #10
    Bölcs
    Csatlakozott
    07-08-28
    Hozzászólás
    1.030
    Begyűjtött 150 köszönetet
    109 hozzászólásával

    Alapbeállítás 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.



Oldal: 1 / 2 12 UtolsóUtolsó

A téma címkéi:

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •