Comment redimensionner des images proportionnellement / garder le ratio d'aspect?
J'ai des images qui seront assez grande dimension et je tiens à les rétrécir vers le bas avec jQuery tout en gardant les proportions limitées, c'est à dire le même aspect.
Quelqu'un peut-il m'indiquer un code, ou d'expliquer la logique?
- Pouvez-vous expliquer pourquoi jQuery doit être utilisé? Il y a un CSS seule solution (voir ma réponse): ensemble de ses
max-width
etmax-height
à100%
. - Juste au cas où quelqu'un ne sait pas, si vous définissez une seule dimension de l'image (largeur ou hauteur) elle est redimensionnée en proportion. Il a été de cette façon depuis l'aube du web. Par exemple:
<img src='image.jpg' width=200>
- Aussi, vous pouvez envisager d'utiliser quelque chose comme slimmage.js pour économiser de la bande passante et l'appareil mobile de RAM.
Vous devez vous connecter pour publier un commentaire.
Avoir un regard sur ce morceau de code à partir de http://ericjuden.com/2009/07/jquery-image-resize/
max-width
etmax-height
à100%
. jsfiddle.net/9EQ5cif statements
on peut simplement calculer la nouvellewidth
etheight
et à la fin du redimensionnement de l'image, juste une foisJe pense que c'est vraiment un cool méthode:
function calculateAspectRatioFit(dimensions) { /* then use such as dimensions.maxWidth , dimensions.srcWidth ...*/ }
, et ensuite appeler commefunction({ maxWidth: someWidth, srcWidth: someOtherWith, maxHeight: someHeight, srcHeight: someOtherHeight });
? cela peut être utile pour éviter les problèmes avec les paramètres de commande.var dimensions = calculateAspectRatioFit(3240, 2500, 300, 400);
de Cette façon vous obtenez un objet avec la finale de la largeur et de la hauteur, il suffit de définir les dimensions! si vous utilisez jquery:$("#myImage").css({width:dimensions.width, height:dimensions.height})
Math.floor
va vraiment aider avec un pixel parfait conception 🙂function imgSizeFit(img, maxWidth, maxHeight){ var ratio = Math.min(1, maxWidth / img.naturalWidth, maxHeight / img.naturalHeight); img.style.width = img.naturalWidth * ratio + 'px'; img.style.height = img.naturalHeight * ratio + 'px'; }
Si je comprends correctement à la question, vous n'avez même pas besoin de jQuery pour cela. Rétrécissement de l'image proportionnellement sur le client qui peut être fait avec CSS seul: il suffit de définir son
max-width
etmax-height
à100%
.Voici le violon: http://jsfiddle.net/9EQ5c/
span
au lieu d'undiv
.width: auto; height: auto;
pour obtenir votre code en cours 🙂vh
unités. Par exemple, changer le wrapper de<div style="height: 100vh">
.Afin de déterminer la ratio d'aspect, vous avez besoin d'avoir un ratio de but pour.
Dans cet exemple, j'utilise
16:10
depuis cette typiques format du moniteur.Résultats à partir de ci-dessus serait
147
et300
en fait je viens de rencontrer ce genre de problème et la solution que j'ai trouvé était étrangement simple et bizarre
et, par miracle, l'image est redimensionnée à la nouvelle hauteur et en conservant le même rapport!
Il y a 4 paramètres de ce problème
Et il y a 3 différents paramètres conditionnels
solution
c'est tout ce que vous devez faire.
C'est une mature forum, je ne suis pas vous donner le code pour ça 🙂
Ne
<img src="/path/to/pic.jpg" style="max-width:XXXpx; max-height:YYYpx;" >
aider?Navigateur prendra soin de garder le ratio d'aspect intact.
je.e
max-width
coups de pied dans quand la largeur de l'image est plus grande que la hauteur, et sa hauteur sera calculée proportionnellement. De mêmemax-height
en vigueur au moment où la hauteur est plus grande que la largeur.Vous n'avez pas besoin de jQuery ou javascript pour cela.
Pris en charge par ie7+ et les autres navigateurs (http://caniuse.com/minmaxwh).
Cela devrait fonctionner pour les images de toutes les proportions
Si l'image est proportionnelle ensuite ce code va remplir le conteneur de l'image. Si l'image n'est pas en proportion de l'espace de la largeur/hauteur de l'obtenir recadrée.
Sans plus de temp de vars ou des crochets.
Garder à l'Esprit: les moteurs de Recherche ne l'aime pas, si la largeur et la hauteur de l'attribut n'est pas conforme à l'image, mais ils ne savent pas JS.
Après quelques essais et erreurs, je suis venu à cette solution:
Le redimensionnement peut être atteint(en conservant les proportions) à l'aide de CSS.
C'est une nouvelle simplifié réponse inspirée par Dan Dascalescu post.
http://jsbin.com/viqare
CSS:
HTML:
Voici une correction à Mehdiway de réponse. La nouvelle largeur et/ou hauteur n'ont pas été mis à la valeur max. Un bon test est le suivant (1768 x 1075 pixels): http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png. (Je n'étais pas en mesure de commenter ci-dessus en raison du manque de points de réputation.)
Ont un coup d'oeil à cette pièce...
2 Étapes:
Étape 1) calculer le rapport de la largeur d'origine /hauteur d'origine de l'Image.
Étape 2) multiplier les original_width/original_height ratio par la nouvelle hauteur souhaitée pour obtenir la nouvelle largeur correspondant à la nouvelle hauteur.
Ce problème peut être résolu par la CSS.
Ce totalement fonctionné pour moi un élément déplaçable - aspectRatio:vrai