Explication détaillée sur la façon d'obtenir la taille réelle d'une image à l'aide de JavaScript

Les tailles des images sur les pages Web semblent toutes identiques. Dans les pages d'articles que nous voyons le plus souvent avec plusieurs images, la taille des images est généralement la même que la largeur de la page. De cette façon, la page ressemble à un cylindre droit. Si vous voyez trop cette mise en page, elle le fera. se sentir très monotone. La raison de cette situation, je pense, est en grande partie due aux limitations des anciens navigateurs. Cependant, avec la popularité des navigateurs modernes (Firefox/Google/IE11), les navigateurs ont de moins en moins de restrictions sur la conception des pages, et l'imagination des programmeurs Web peut être grandement utilisée.

Par exemple, un quiz : savez-vous d'où vient le [x] dans chaque fenêtre ? Dans cet article, de nombreuses images dépassent la limite de largeur du texte, donnant aux gens une impression d'inégalité. Dans le même temps, permettre aux grandes images d'être affichées dans leur taille réelle donne aux gens une sensation plus choquante.

Mais techniquement, nous pouvons facilement limiter les images par la largeur maximale du texte, afin qu'elles conservent toutes la même largeur. Au lieu d'appuyer sur la largeur du texte, nous avons besoin que chaque image ait sa propre taille. . Nous pouvons déclarer la taille originale de l'image lors de l'édition côté serveur. Un moyen plus flexible consiste à obtenir dynamiquement la taille d'origine de l'image en plaçant un morceau de js sur la page et à modifier dynamiquement la taille d'affichage de l'image. Ceci est non seulement compatible avec l'ancienne méthode de maximisation de la largeur du texte, mais permet également aux images d'afficher leur taille d'origine en cas de besoin.

Comment obtenir la taille originale de l'image côté navigateur en utilisant JavaScript ?

var img = $("#img_id"); // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

Les navigateurs Webkit (Google Chrome, etc.) ne peuvent obtenir les valeurs de hauteur et de largeur qu'après l'événement chargé de l'image. Par conséquent, vous ne pouvez pas utiliser la fonction timeout pour retarder l'attente. Le meilleur moyen est d'utiliser l'événement onload de l'image.

Afin d'éviter l'impact du CSS sur la taille de l'image, le code ci-dessus copie l'image en mémoire pour le calcul.

Si votre page est une page ancienne, vous pouvez intégrer ce code en bas de page selon vos besoins. Cela ne nécessite pas de modifier la page d'origine.

Référez-vous à stackoverflow

Tutoriel recommandé : "Tutoriel de base JavaScript"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!