|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
passion
WRInaute accro
Inscrit le: 06 Jan 2006
Messages: 2060
Localisation: La Rochelle
|
 Posté le : Sam Juin 07, 2008 15:25 Sujet du message: Prob affichage image |
|
|
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 ! 
Dernière édition par passion le Dim Juin 08, 2008 0:53; édité 2 fois |
|
| |
|
 |
ZelkiN
WRInaute occasionnel
Inscrit le: 27 Juil 2007
Messages: 204
Localisation: Aix-Les-Bains (73)
|
| Posté le : Sam Juin 07, 2008 15:26 Sujet du message: Prob affichage image |
|
|
| et en faisant simplement valign="middle" ? non ? |
|
| |
|
|
manHa
WRInaute accro
Inscrit le: 27 Juil 2007
Messages: 1036
|
| Posté le : Sam Juin 07, 2008 15:27 Sujet du message: Prob affichage image |
|
|
| Tu devrais utiliser un système de thumbails ou autres parce que des images redimenssionnées avec HTML c'est pas beau. |
|
| |
|
|
passion
WRInaute accro
Inscrit le: 06 Jan 2006
Messages: 2060
Localisation: La Rochelle
|
| Posté le : Sam Juin 07, 2008 15:36 Sujet du message: Prob affichage image |
|
|
| Citation: |
| valign="middle" |
même chose !!
| Citation: |
| ...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
WRInaute accro
Inscrit le: 06 Jan 2006
Messages: 2060
Localisation: La Rochelle
|
| Posté le : Sam Juin 07, 2008 18:41 Sujet du message: Prob affichage image |
|
|
pas de solution ??  |
|
| |
|
|
Bool
WRInaute accro
Inscrit le: 26 Fév 2004
Messages: 1112
Localisation: Lyon
|
| Posté le : Sam Juin 07, 2008 19:00 Sujet du message: Prob affichage image |
|
|
| le "vertical-align" serait plutot à appliquer sur le conteneur, pas sur l'image. |
|
| |
|
|
passion
WRInaute accro
Inscrit le: 06 Jan 2006
Messages: 2060
Localisation: La Rochelle
|
| Posté le : Sam Juin 07, 2008 19:54 Sujet du message: Prob affichage image |
|
|
| Bool a écrit: |
| 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;
} |
|
|
| |
|
|
zeb
WRInaute passionné
Inscrit le: 05 Déc 2004
Messages: 925
|
| Posté le : Sam Juin 07, 2008 22:23 Sujet du message: Prob affichage image |
|
|
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
WRInaute accro
Inscrit le: 06 Jan 2006
Messages: 2060
Localisation: La Rochelle
|
| Posté le : Dim Juin 08, 2008 0:49 Sujet du message: Prob affichage image |
|
|
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... |
|
| |
|
|
| |
|
|
