La taille des images sur la page Web semble être la même. Dans les pages d'article les plus courantes avec plusieurs images, la taille de l'image est généralement la même que la largeur de la page. De cette façon, la page ressemble à une forme cylindrique droite. Si vous voyez trop de cette disposition, vous vous sentirez très monotone. Je pense que cette situation est en grande partie due aux limites des navigateurs à l'ancienne. Cependant, avec la popularité des navigateurs modernes (Firefox / Google / IE11), les navigateurs ont de moins en moins de restrictions sur la conception de la page, et l'imagination des programmeurs Web peut être grandement exercée.
Par exemple, Leng Zhi: Savez-vous comment [x] de chaque fenêtre provient? Dans cet article, de nombreuses images dépassent la limite de la largeur du texte, donnant aux gens un sentiment de stupéfiant et de stupéfiant. Dans le même temps, de grandes images sont affichées dans leur taille réelle, donnant aux gens un sentiment plus choquant.
Mais techniquement, nous pouvons facilement limiter les images avec la largeur maximale du texte, afin qu'elles maintiennent toutes une largeur, et lorsque nous ne suivons pas la largeur du texte, nous avons besoin de la taille de chaque image. Nous pouvons déclarer la taille d'origine de l'image lors de l'édition sur le 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 en modifiant dynamiquement la taille d'affichage de l'image. Ceci est compatible avec l'ancienne largeur maximale de texte, et peut également faire apparaître l'image sa taille d'origine en cas de besoin.
Comment obtenir la taille d'origine de l'image du côté du navigateur à l'aide de JavaScript?
La copie de code est la suivante:
var img = $ ("# img_id"); // Obtenez mon iMg elem
var pic_real_width, pic_real_height;
$ ("<img />") // Faire en mémoire une copie de la mémoire de l'image pour éviter les problèmes CSS
.attr ("src", $ (img) .attr ("src"))
.load (function () {
pic_real_width = this.width; // Remarque: $ (this) .width ()
pic_real_height = this.height; // fonctionne pour les images de mémoire.
});
Le navigateur WebKit (Google Chrome, etc.) ne peut obtenir des valeurs de hauteur et de largeur après l'événement chargé de l'image. Ainsi, vous ne pouvez pas utiliser la fonction de délai d'expiration pour attendre retardé, la meilleure façon 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 à la mémoire pour le calcul.
Si votre page est une page à l'ancienne, vous pouvez intégrer ce code au bas de la page au besoin, et il ne vous oblige pas à modifier la page d'origine.