L'image refuse de redimensionner même via des outils de développement?

Question

J'essaye de customiser un script de lightbox (prototype) pour lui faire redimensionner des images qui sont plus grandes que la fenêtre. J'ai réussi à insérer une preuve de concept de base pour redimensionner la superposition de lightbox et tout ce qui lui appartient, sauf pour un détail important: l'image elle-même ne sera pas redimensionnée.

J'ai essayé d'ajouter la fonction de redimensionnement (this.lightboxImage.writeAttribute('width', newWidth), où newWidth est la nouvelle largeur calculée) dans différentes fonctions du script lightbox mais sans résultat. Après quelques tests plus j'ai réussi à vérifier ces hors pour vous assurer que le problème n'a pas été dans mon script:

• La nouvelle largeur est calculée correctement
• La fonction est appelée après l'image obtient sa largeur d'origine (nouvelle largeur ne sera pas écrasé après l'avoir configuré)
• écrit plusieurs attributs différents sont
avec succès

En fait, si je lance:

this.lightboxImage.writeAttribute('width', newWidth); 
alert(this.lightboxImage.readAttribute('width'); 

Je reçois une alerte donnant 600 (ma nouvelle largeur, redimensionnée à partir de 1023px de largeur). Même dans le HTML, le script génère <img src="pic.jpg" width="600" />. Alors j'ai utilisé l'inspecteur de dom (à la fois dans Chrome et IE9) et essayé de changer la valeur, mais même alors, l'image reste juste en taille réelle.

Qu'est-ce qui se passe ici et comment puis-je le réparer?

Answer 1

Plutôt que d'essayer de changer l'attribut de la largeur, vous pourriez essayer d'ajouter un style pour le rendre plus petit, .: par exemple

this.lightboxImage.writeAttribute("style", "width: "+newWidth+"px");