Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Répandez vos soluces sur la planète

Love me
Solucior » JAVASCRIPT » Largeur image dynamique selon son emplacement

Largeur image dynamique selon son emplacement

06/03/2011 par Dux   -   3.7/5 (3 notes)

Cette méthode javascript redimensionne une image en large suivant son emplacement. Les images ne déborderont pas de la page ou du div qui les contiennent. Il prend aussi en compte les padding left et right de l'élément parent afin de ne pas déborder.
Il fonctionnement automatiquement, il n'est pas nécessaire de modifier le contenu HTML du body.

Fonctionnement :
- Copiez le code javascript dans le header entre <head> et </head>
- Dans la balise ouvrante body, ajoutez la fonction en onload
<body onload="resizeIMG()">

Voir une démonstration de ce script en action :

Ouvrir dans une nouvelle fenêtre     Ouvrir dans la même fenêtre

code source



 
<script type="text/javascript">
   function
resizeIMG() {
       function
resizeW(elm) {
           var
prt = elm.parentNode;
           
// Parent width
           
var widthPrt = (prt.offsetWidth) ? prt.offsetWidth : prt.style.pixelWidth;
           
// Parent padding left and right
           
if (prt.style.paddingLeft) widthPrt -= parseInt(prt.style.paddingLeft) + parseInt(prt.style.paddingRight);
           
// Image width
           
var widthImg = (elm.offsetWidth) ? elm.offsetWidth : elm.style.pixelWidth;
           if (
widthImg > widthPrt) elm.style.width = widthPrt + "px";
       }
       for (
i = 0; i < document.images.length; i++) resizeW(document.images[i]);
   }
</script>

Testé avec Safari  Google Chrome  Firefox3  Firefox4  Opera  IE6  IE7  IE8  
Noter ce code     |     Copié : 33x

Commentaires pour Largeur image dynamique selon son emplacement

Aucun commentaire
Ajouter un commentaire Pseudo   Site
ZOOM