Prob affichage image

[passion]

Bonjour,

J'urilise un redimensionnement auto d'une image avec une div qui délimite les dimensions maximales - > oK

Mais mon prob vient de mes images qui sont plus petites que les dimensions maximales et donc créer des espaces vides. Pour cela, je les centre -> ok mais malgré mon CSS, elles ne veulent pas se centrer aussi verticalement...
J'ai essayé "vertical-align", etc.. rien à faire, elles restent bloquer en top.

Code: Tout sélectionner

#produits_accueil_boutique{
   float:left;
   /*width:210px;*/
   text-align:center;
   padding-left:35px;
   font-size:12px;
   height:265px;
}

#img_produit {
   border:1px solid black;
   width:200px;
   height:200px;
}

J'ai essayé ...

Code: Tout sélectionner

#img_produit img{
   vertical-align:middle;
}



RIEN !

[ZelkiN]

et en faisant simplement valign="middle" ? non ?

[manHa]

Tu devrais utiliser un système de thumbails ou autres parce que des images redimenssionnées avec HTML c'est pas beau.

[passion]

valign="middle"

même chose !!

...Tu devrais utiliser un système de thumbails...

Merci du conseil mais je suis trop avancé pour reprendre entre chose !
C'est une finition... cette histoire d'image !

[passion]

pas de solution ??

[Bool]

le "vertical-align" serait plutot à appliquer sur le conteneur, pas sur l'image.

[passion]

le "vertical-align" serait plutot à appliquer sur le conteneur, pas sur l'image.

Même chose ..

Code: Tout sélectionner

#boutique #mini_produit {
   width:76px;
   height:76px;
   border:1px solid black;
   vertical-align:middle;
}

[zeb]

tu fixe la taile de la div (hauteur largeur en display block.
ensuite tu applique a la div ton image mais en backgroung que tu centre.

background-image: url(../images/produit.jpg);
background-position: center center;
background-repeat: no-repeat;

[passion]

merci mais j'ai trouvé une alternative..!

En faite, du fait que j'ai délimité mes dimensions maximales WIDTH et HEIGHT, j'ai fait une p'tite function qui me calcul automatiquement le margin-top d'une image si celle-ci est inférieurs et le tour est joué !!

C'est nickel ! Si cela peut servir...

Ma function...

Code: Tout sélectionner

function miniature($img) {
    $dst_w = 76;
    $dst_h = 76;
   
    // Lit les dimensions de l'image
   $size = GetImageSize($img); 
   $src_w = $size[0];
   $src_h = $size[1];
   
   // Teste les dimensions tenant dans la zone
   $test_h = round(($dst_w / $src_w) * $src_h);
   $test_w = round(($dst_h / $src_h) * $src_w);
   
   // Si Height final non précisé (0)
   if(!$dst_h) $dst_h = $test_h;
   
   // Sinon si Width final non précisé (0)
   elseif(!$dst_w) $dst_w = $test_w;
   
   // Sinon teste quel redimensionnement tient dans la zone
   elseif($test_h>$dst_h) $dst_w = $test_w;
   else $dst_h = $test_h;
   
   $tab = array($dst_w, $dst_h);
    return $tab;
}

puis ma règle qui délimiter automatiquement l'espace libre pour centrer verticalement une image en fonction de dimensions maximales...

Code: Tout sélectionner

$tableau = miniature("./images/" . $new_products['products_image']);
   
    if($tableau[1] > 1 AND $tableau[1] < 76){
      $paddingTop = ceil((76 - $tableau[1]) / 2);
   }
   else{
      $paddingTop = 0;
   }
   $pad = " style=\"margin-top:".$paddingTop."px;\"";

voila...