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.

#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é ...

#img_produit img{
	vertical-align:middle;
}

RIEN ! :evil:

 

[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 !! :evil:

...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 ?? :cry:

 

[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 ..

#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...

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...

$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...