JavaScript redimensionne dynamiquement les images

Un problème courant lors de la mise à jour d'articles sur votre propre site Web est que les illustrations des articles sont trop larges, ce qui entraîne une distorsion de la page Web entière. Il serait trop compliqué de mettre à l'échelle chaque illustration avant de l'insérer.

J'ai rencontré ce genre de chose dans un article que j'ai écrit il y a quelque temps. Plus tard, j'ai utilisé les propriétés CSS overflow et max-width pour résoudre temporairement le problème de déformation des pages. L’avantage de cette méthode est qu’elle est simple, mais l’inconvénient est qu’elle détruira l’effet de certains détails.

Par exemple, overflow:hidden signifie que lorsque la largeur de l'élément interne est supérieure à celle du cadre parent, l'excédent de largeur est masqué. Cela pourrait entraîner la coupure et le masquage soudain de certains contenus, ce qui est dommage pour le public.

Si vous limitez la largeur maximale des illustrations d'articles via l'attribut max-width, vous devez prendre en compte la compatibilité de chaque navigateur. IE6 ne prend pas en charge cet attribut. À mon avis, bien que certains navigateurs prennent en charge cet attribut, les images ne sont pas mises à l'échelle proportionnellement (il semble que ce soit Safari et Opera, je ne m'en souviens pas clairement). Si cela est fait, cela sera nuisible). aux utilisateurs de ces navigateurs. Très injuste.

Par conséquent, j’ai finalement choisi de modifier dynamiquement la taille de l’image via JavaScript. Cette méthode a une bonne compatibilité avec différents navigateurs (très peu de gens désactiveraient JavaScript de nos jours, n'est-ce pas ?), et si le thème est modifié, la taille maximale des illustrations de l'article peut également être modifiée de manière flexible.

Il existe deux solutions. Puisque le thème que j'utilise est chargé avec la bibliothèque jQuery, il peut être implémenté avec le code suivant :

$ ( document ) . prêt ( fonction ( ) {
 $ ( '.post img' ) chacun ( fonction ( ) {
 var maxWidth = 100 ; // Largeur maximale de l'image
 var maxHeight = 100 ; // Hauteur maximale de l'image
 var ratio = 0 ; // rapport de mise à l'échelle
 var width = $ ( this ) . width ( ) ; // Largeur réelle de l'image.
 var hauteur = $ ( this ) . hauteur ( ) ; // Hauteur réelle de l'image

 // Vérifiez si l'image est super large
 si ( largeur > maxWidth ) {
 ratio = maxWidth / width ; // Calculer le rapport de mise à l'échelle
 $ ( this ) . css ( "width" , maxWidth ) ; // Définit la largeur d'affichage réelle.
 height = height * ratio ; // Calculer la hauteur après une mise à l'échelle égale
 $ ( this ) . css ( "height" , height * ratio ) ; // Définir la hauteur après une mise à l'échelle proportionnelle.
 }

 // Vérifiez si l'image est très grande
 si ( hauteur > maxHeight ) {
 ratio = maxHeight / height ; // Calculer le rapport de mise à l'échelle
 $ ( this ) . css ( "height" , maxHeight ) ; // Définit la hauteur d'affichage réelle.
 width = width * ratio ; // Calculer la hauteur après une mise à l'échelle égale
 $ ( this ) . css ( "width" , width * ratio ) ; // Définir la hauteur après une mise à l'échelle proportionnelle.
 }
 } ) ;
 } ) ;

Si vous ne souhaitez pas charger la bibliothèque jQuery, vous pouvez utiliser le code suivant :

 fonction ResizeImage ( image , largeur maximale de l'illustration , hauteur maximale de l'illustration )
 {
 if ( image. className == "Vignette" )
 {
 w = image.largeur ;
 h = image.hauteur ;

 si ( w == 0 || h == 0 )
 {
 image.width = largeurmaximale ;
 image.hauteur = hauteur max ;
 }
 sinon si ( w > h )
 {
 si ( w > largeur maximale ) image.width = largeur maximale ;
 }
 autre
 {
 si ( h > hauteur max ) hauteur de l'image = hauteur max ;
 }

 image.className = "ScaledThumbnail" ;
 }
 }

L'utilisation de JavaScript pur est un peu plus gênante, car vous devez ajouter manuellement class="Thumbnail" à l'image, mais l'effet final est le même.

Texte original : Ajuster dynamiquement la taille de l'image

Merci bolo pour ta contribution