J'ai un cadre avec une image à l'intérieur qui n'épouse pas les bords

[guillaume7684]

Bonjour,

J'ai besoin d'aide pour mon site e-commerce.

Sur ma page d'accueil, j'ai la photo de mes produits qui est dans un cadre.
Je n'arrive pas à faire agrandir l'image pour qu'elle épouse parfaitement les bords du cadre. Voir copie d'écran en pièce jointe.

Je pense avoir trouvé la partie des codes à modifier dans les 2 fichiers .css suivants:

Fichier widgets.css:

Code :

1
2
3
4
5
6
/* Widget: Catalog New Proructs List */
.widget-new-products { display:block; }
.col-main .widget-new-products { margin:7px 0; }
.widget-new-products .products-grid .product-image,
.widget-new-products .products-list .product-image { width:85px; height:85px; }
.widget-new-products .products-list .product-shop { margin-left:100px; }

Fichier styles.css:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* View Type: Grid */
.products-grid { position:relative; }
.products-grid.last { border-bottom:0; }
.products-grid li.item { float:left; width:171px; padding:0 0 90px; }
.products-grid .product-image { display:block; width:170px; height:170px; border:1px solid #ddd; border-width:1px 1px 1px 0; margin:0 0 10px; }
.products-grid.first .product-image { border-top:0; }
.products-grid li.last .product-image { border-right:0; }
.products-grid .product-name { font-size:12px; margin:0 0 6px; }
.products-grid .product-name a { color:#444; text-decoration:underline; }
.products-grid .product-name a:hover { text-decoration:none; }
.products-grid .price-box { margin:5px 0; }
.products-grid .availability { line-height:21px; }
.products-grid .actions { position:absolute; bottom:25px; }
.col2-left-layout .products-grid,
.col2-right-layout .products-grid { width:684px; margin:0 auto; }
.col1-layout .products-grid,
.page-empty .products-grid { width:684px; margin:0 auto; }

Mais par contre je n'ai aucune idée de ce que je dois modifier !!!
Merci d'avance pour votre aide.

[vodiem]

salut et bienvenu guillaume7684,

il faudrait l'html pour savoir qu'elles sont les style utilisés.
pourrais tu donner sinon un lien ce serait plus simple.
sans cela c'est difficile de deviner ce qui cloche.
essaie à tout hasard de sortir '.product-image' de l'ensemble des class en le mettant dans une nouvelle ligne:

Code CSS :

.product-image { width:100%; height:100%; }

[guillaume7684]

Salut vodiem,

Merci de vouloir m'aider.
Ce serait vraiment cool si on pouvait trouver une solution à mon problème, car même sur le forum de mon site e-commerce, on a pas encore trouvé.

Pour plus d'infos concernant ce problème, tout est ici: http://www.fragento.org/Questions-d-...-le-cadre.html

Par contre si tu veux un lien URL de mon site, je ne peux te le donner qu'en MP car mon site est encore en dév.

Merci par avance.

Guillaume.

[Marc22]

si tes images sont toutes proportionnées de la même façon, je dirais pareil, mais en mettant en plus un "float:left"

[guillaume7684]

Envoyé par Marc22

si tes images sont toutes proportionnées de la même façon, je dirais pareil, mais en mettant en plus un "float:left"

Oui elles ont toutes la même taille.