11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Comme beaucoup j'utilise PNGFix pour corriger le problème de transparence des PNG 24 bits sous IE6. Cependant, je ne sais pourquoi, mais sur certains PNG, il me les déforme complètement. Il étire toute l'image en hauteur.

Quelqu'un connaitrait-il une solution à ce problème ?

Merci d'avance.
Salut,

Le script ou behavior pngFix fait l'opération suivante : il enlève ton image, la remplace par une image invisible généralement appeler "blank.gif" puis il applique un filtre spécial Internet Explorer à ta balise :
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',sizingMethod='image')

Dans cette opération le script ne prend pas en compte la taille de l'image d'origine, et comme la sizingMethod étire le filtre sur toute la balise, le résultat est celui que tu peux observer.

Donc pour éviter ce genre de désagrément il faut mettre les attributs ou styles width et height à ton image.
Modifié par matmat (02 Jul 2008 - 05:30)
Je comprends mieux maintenant pourquoi ça faisait ça que sur certains éléments !
Merci beaucoup pour m'avoir éclairé ! Je vais appliquer ta solution !
Bon finalement la solution ne fonctionnait pas. J'ai essayé d'appliquer un style="width: Xpx; height: Xpx;" puis directement dans la feuille CSS, mais rien a bougé. Ce qui est surprenant dans cette histoire, c'est que je peux avoir 2 images l'une à coté de l'autre, avec les mêmes class et cie, l'une n'aura aucun problème avec pngfix et l'autre se verra déformée.

La seule différence ? Le pourcentage de partie transparente dans l'image. Celle qui est déformée est toujours celle qui en a le moins.
J'ai donc essayé avec la première image d'agrandir la zone de travail en hauteur pour qu'il y ait plus de transparence, et là bam ça fonctionne ça déforme pas O_o

Le problème c'est que ce n'est pas un problème pratique du tout, je vais pas m'amuser à agrandir toutes mes images qui plantent Smiley lol

(A noter, que j'ai également essayé de désactiver la feuille de style pour voir si elle avait une quelconque influence et c'est pareil avec ou sans donc elle l'interfère pas)

Une idée ? Smiley ohwell
Coucou,

Sans doute un peu tard pour répondre, mais si jamais tu as encore des soucis avec le pngfix, j'ai trouvé un "work-around". J'ai cherché longtemps, donc... Autant faire profiter Smiley smile

Au lieu de laisser le sizingmethod en "scale", tu le changes en "image". Les bords (transparents) du span seront gérés pour coller à la dimension de l'image... Et plus de transformation !

Bien à toi Smiley smile
iguypouf a écrit :
Coucou,
Sans doute un peu tard pour répondre, mais si jamais tu as encore des soucis avec le pngfix, j'ai trouvé un "work-around". J'ai cherché longtemps, donc... Autant faire profiter Smiley smile
Au lieu de laisser le sizingmethod en "scale", tu le changes en "image". Les bords (transparents) du span seront gérés pour coller à la dimension de l'image... Et plus de transformation !
Bien à toi Smiley smile

Bonjour iguypouf,

C'est effectivement un peu tard, d'autant plus que c'est également fort bien expliqué par Florent V. dans l'astuce de l'univers apprendre : Obtenir la transparence PNG avec Internet Explorer 6
Toutefois, la pédagogie c'est l'art de la répétition comme disait l'autre...merci, donc, de ton passage Smiley jap
Bonjour à tous,

je réactive un peu ce message car malgré les astuces citées dans l'article et sur ce post, certaines de mes images restent déformées.
J'ai pourtant changé le sizingmethod et rajouté un zoom là où besoin est, mais sans succès, mes images (images de fond gérées via une CSS) s'étirent.

Quelqu'un aurait il une autre nouvelle astuce ? Smiley langue