Crop thumbnail with PHP and CSS

Discussion in 'Web Design and Development' started by nomade, Dec 5, 2014.

  1. nomade macrumors member


    Dec 2, 2006
    My client ask for a page where I crop the thumbnail to be square evenly cropped from top, bottom ,left and right.

    here's my code :

    $sql_diapo=mysql_query("SELECT * FROM diapo WHERE categorie = '".$_GET['categorie']."' ORDER BY ordre ASC"); 
    // ================ CALCULER HAUTEUT ET LARGEUR ================ 
    $laphoto="".$ligne_diapo['id_diapo'].".jpg "; 
    $laphoto_g="".$ligne_diapo['id_diapo'].".jpg "; 
    list($width, $height) = getimagesize($laphoto); 
    if($width > $height){ // paysage 
    $trop_large = $width - $height; //largeur moins hauteur 
    $coupe_large=$trop_large / 2; //resultat divisé par 2 (gauche-droite) 
    $largeur=$coupe_large / $width * 100; // en pourcentage 
    $largeur2=ceil($largeur); // arrondi 
    else{ // portrait 
    $trop_haut = $height - $width; //hauteur moins largeur 
    $coupe_haut=$trop_haut / 2; //resultat divisé par 2 (haut-bas) 
    $hauteur=$coupe_haut / $height *100; // en pourcentage 
    $hauteur2=ceil($hauteur); // arrondi à l'entier supérieur 
    echo "<div class=diapo>L:".$largeur2." H:".$hauteur2."<br><div style=' "; 
    if (isset($largeur2)){ echo "left: -".$largeur2."%;"; echo "right: -".$largeur2."%;";} 
    if (isset($hauteur2)){ echo " top: -".$hauteur2."%;"; echo " bottom: -".$hauteur2."%;";} 
    echo " '><a class=fancybox href=".$laphoto_g." data-fancybox-group=".$_GET['categorie']." title='".$ligne_diapo['legende']."'><img src=".$laphoto."></a></div></div>"; 
    The crop is working but not centered. You can view the result on this page :

    Any suggestion will be welcomed.
  2. elppa, Dec 5, 2014
    Last edited: Dec 5, 2014

    elppa macrumors 68040


    Nov 26, 2003
    Hi - your English reads a lot better than my French - so we may be better off this way around… I hope you understand :)

    You can fix it with CSS.

    First position the top left corner of the image in the middle of your picture frame (div.diapo).

    div.diapo {
        float: left;
        width: 96px;
        height: 96px;
        margin: 0 4px 4px 0;
        overflow: hidden;
        position: relative;
    div.diapo img {
        position: absolute;
        width: 240px;
        height: 320px;
        top: 50%;
        left: 50%
    After this step you page should look like this (I have put a grey background on div.diapo to illustrate the positioning):


    Then you can center the images in the frame with a negative margin -(height / 2) and -(width / 2).

    div.diapo img {
        position: absolute;
        width: 240px;
        /* (240 / 2) */
        margin-left: -120px;
        height: 320px;
        /* (320 / 2) */
        margin-top: -160px;
        top: 50%;
        left: 50%;
    The page should then look like this - with all images centered:


    It might also be worth doing the resizing in PHP and creating thumbnails.

    There is a good example of the PHP site of how to do proportional scaling:

    Resampling an image proportionally

    You could then write the thumbnail out as a file.


    You have a security vulnerability you have exposed to the world. Please read up on parameter validation and in particular PDO prepared statements.


    Why you Should be using PHP's PDO for Database Access

    Attached Files:

  3. nomade thread starter macrumors member


    Dec 2, 2006
    Thank you very much, your solution is simple and accurate. I adapt it to my need and it work perfectly. Thanks for you time.

Share This Page