Nombre de mises en pages très élaborées se voient mise à sac par des utilisateurs affichant des images trop grandes. Que les webdesigner ait utilisé des div ou un tableau, tout est sans dessus dessous et très disgracieux à l’insertion d’une grande photo et autres captures d’écrans, l’image dépasse de son conteneur et des décalages apparaissent dans le design. Heureusement un petit Javascript trouvé dans un thème de Mike Lothar permet de résoudre se problème !
Le voici:
<script type="text/javascript"> //<![CDATA[ <!-- function resize_images() { for (i = 1; i < document.images.length; i++) { while (!document.images[i].complete) { break; } if (document.images[i].width > 550) { document.images[i].width = 530; } } } //--> //]]> </script> Ou 550 (en pixels) correspond à la largeur maximale de l’image et 530 la largeur qu’auront les images dépassant 550px. A vous d’adapter ses dimensions !
C’est tout simple mais il fallait y penser !
Reste lancer le script au chargement de la page, rajoutez le code onload=”resize_images()” dans la balise body comme ceci:
<body onload="resize_images">