jQuery Girl
  1. jQuery Girl
  3. Fonction jQuery pour redimensionner un ensemble d’images sur une zone donnée (pas de hauteur ni de largeur)
Intereting Posts
Glissez et déposez les images du bureau au navigateur au lieu de chercher avec l’entrée Comment envoyer un tableau javascript à cherrypy Augmenter les valeurs css avec jquery Pourquoi Webkit ne repeint-il pas ma page Web correctement? Accéder à la variable javascript dans ajax success Redimensionner dynamicment le texte en fonction de la largeur du conteneur Empêcher la ligne de devenir éditable pendant le double clic – jqGrid jQuery sur méthode avec réponse ajax Mise en œuvre de la scrutation avec setInterval dans une application knock-out? Changer la largeur de div en direct avec jQuery En-tête accordéon dans AngularUI Jquery Ajax post pour mettre à jour les sessions django dans les vues Jquery arrête l’animation au passage de la souris Envoi de données depuis Javascript vers Servlet “L’information d’état n’est pas valide pour cette page et pourrait être corrompue”

Fonction jQuery pour redimensionner un ensemble d’images sur une zone donnée (pas de hauteur ni de largeur)

J’essaie d’écrire une fonction jQuery qui redimensionnera un ensemble d’images en fonction d’une zone spécifiée, plutôt que d’une simple hauteur ou largeur maximale.

Il y a une question similaire ici: redimensionner l’image par zone , mais j’aimerais que cela fonctionne en jquery et avec plusieurs images en même temps.

Voici ce avec quoi je travaille actuellement: http://jsfiddle.net/szSE5/21/ – cela ne fonctionne pas comme je le pensais pour le moment.

Que dis-tu de ça: 

jQuery.fn.resizeImgByArea = function(avgDimension){ var $this = $(this), oldW = $this.width(), oldH = $this.height(), RatiO = new Number(oldW/oldH), newH = new Number(Math.round(Math.sqrt(avgDimension/RatiO))), newW = new Number (Math.round(newH * RatiO)); $this.css({ width: newW + 'px', height: newH + 'px' }); } $(document).ready(function() { $('#images img').each(function(){$(this).resizeImgByArea(10000)}); });

Dans votre violon: http://jsfiddle.net/szSE5/21/ 

 jQuery.fn.resizeImgToArea = function(area) { this.each(function() { var imgElement = $(this); var originalWidth = imgElement.width(); var originalHeight = imgElement.height(); var aspectRatio = originalWidth / originalHeight; var newHeight = Math.round(Math.sqrt(area/aspectRatio)); var newWidth = Math.round(aspectRatio * newHeight); imgElement.width(newWidth); imgElement.height(newHeight); }); return this; };

À première vue, votre solution jsfiddle ne fonctionne pas car “ceci” dans votre contexte est un élément DOM droit, pas un object jQuery.