Comment définir dynamiquement la largeur d’image en JavaScript en fonction des dimensions réelles

Avez-vous déjà souhaité contrôler la largeur des images sur votre site web en fonction de leurs dimensions réelles en pixels ? Il peut être frustrant de voir des images apparaître plus grandes ou plus petites que prévu. Si votre objectif est de définir la largeur CSS de vos images uniquement si leur largeur réelle dépasse une valeur spécifiée, vous êtes au bon endroit ! Dans cet article, nous allons explorer une solution qui utilise JavaScript pur, sans s’appuyer sur des frameworks externes.

Le Problème : Définir la Largeur de l’Image

Lorsque vous essayez de définir l’attribut de largeur CSS d’une balise image, vous vous attendez à ce que cela s’applique en douceur. Cependant, si votre objectif est de redimensionner l’image seulement lorsque sa largeur réelle dépasse un seuil spécifié, vous pouvez rencontrer des complications avec des méthodes comme offsetWidth. Ci-dessous, nous détaillons les étapes à suivre pour y parvenir.

L’Approche Initiale

Jetons un œil au code initial avec lequel vous pourriez commencer :

function setImagesWidth(id,width) {
    var images = document.getElementById(id).getElementsByTagName("img");
    for(var i = 0; i < images.length;i++) {
        // Approche prévue
        images[i].style.width=width;    
    }       
}

Cette fonction de base tente de définir la largeur des images à une valeur définie, mais elle manque de la condition nécessaire pour vérifier si la largeur réelle de chaque image est adéquate.

La Propriété de Largeur Trompeuse

Vous avez peut-être essayé d’utiliser images[i].offsetWidth, mais vous vous êtes retrouvé confus par les résultats. Par exemple, si une image de 109px de largeur retourne 111, cela soulève une question. Cette différence provient souvent de l’espace supplémentaire occupé par les bordures ou le remplissage. Pour éviter de telles complications, il est conseillé d’utiliser clientWidth, qui fournit avec précision la largeur rendue de l’image, en excluant les valeurs de bordure et de marge.

La Solution : Ajustement du Code

Pour résoudre le problème de définition de la largeur CSS uniquement lorsque la largeur réelle dépasse une valeur spécifique, nous pouvons réviser la fonction comme suit :

function setImagesWidth(id, width) {
    var images = document.getElementById(id).getElementsByTagName("img");
    var newWidth = width + "px";  // Ajout de "px" à la largeur

    for (var i = 0; i < images.length; ++i) {
        // Vérifiez si le clientWidth réel dépasse la largeur spécifiée
        if (images[i].clientWidth > width) {
            images[i].style.width = newWidth;  // Définir la nouvelle largeur uniquement si les conditions sont remplies
        }                       
    }
}

Changements Clés Expliqués

1. Utilisation de clientWidth : Au lieu de offsetWidth, nous avons utilisé clientWidth pour obtenir les dimensions dont nous avons besoin.

2. Logique Conditionnelle : L’inclusion d’une instruction if vous permet de vérifier si le clientWidth de l’image dépasse la largeur spécifiée avant d’appliquer tout changement.

3. Simplicité : Nous avons veillé à ce que la logique reste simple et compréhensible, ce qui facilite l’adaptation ou l’expansion par quiconque.

Conclusion

En mettant en œuvre l’approche ci-dessus, vous pouvez définir dynamiquement la largeur des images en fonction de leurs dimensions réelles, permettant ainsi un design plus propre et plus réactif. N’oubliez pas, l’utilisation de clientWidth est cruciale pour mesurer avec précision la taille du contenu de vos images, ce qui aide à éviter la confusion ou les problèmes de mise en page inutiles.

Maintenant que vous avez la solution, pourquoi ne pas l’essayer ? Ajustez la largeur de vos images de manière conditionnelle et voyez la différence que cela apporte à l’apparence de votre site web ! Bonne programmation !