Prob affichage image

WRInaute accro
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:
#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:
#img_produit img{
	vertical-align:middle;
}

RIEN ! :evil:
 
WRInaute impliqué
Tu devrais utiliser un système de thumbails ou autres parce que des images redimenssionnées avec HTML c'est pas beau.
 
WRInaute passionné
le "vertical-align" serait plutot à appliquer sur le conteneur, pas sur l'image.
 
WRInaute accro
Bool a dit:
le "vertical-align" serait plutot à appliquer sur le conteneur, pas sur l'image.

Même chose ..
Code:
#boutique #mini_produit {
	width:76px;
	height:76px;
	border:1px solid black;
	vertical-align:middle;
}
 
WRInaute accro
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;
 
WRInaute accro
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:
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:
$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...
 
Discussions similaires
Haut