Come ridimensionare le immagini in modo proporzionale / mantenere le proporzioni?

Ho delle immagini che saranno abbastanza grandi nelle dimensioni e voglio ridurle con jQuery mantenendo le proporzioni vincolate, cioè lo stesso rapporto di aspetto.

Qualcuno può indicarmi un codice o spiegare la logica?

Dai un’occhiata a questo pezzo di codice da http://ericjuden.com/2009/07/jquery-image-resize/

 $(document).ready(function() { $('.story-small img').each(function() { var maxWidth = 100; // Max width for the image var maxHeight = 100; // Max height for the image var ratio = 0; // Used for aspect ratio var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if the current width is larger than the max if(width > maxWidth){ ratio = maxWidth / width; // get ratio for scaling image $(this).css("width", maxWidth); // Set new width $(this).css("height", height * ratio); // Scale height based on ratio height = height * ratio; // Reset height to match scaled image width = width * ratio; // Reset width to match scaled image } // Check if current height is larger than max if(height > maxHeight){ ratio = maxHeight / height; // get ratio for scaling image $(this).css("height", maxHeight); // Set new height $(this).css("width", width * ratio); // Scale width based on ratio width = width * ratio; // Reset width to match scaled image height = height * ratio; // Reset height to match scaled image } }); }); 

Penso che questo sia un metodo davvero interessante:

  /** * Conserve aspect ratio of the original region. Useful when shrinking/enlarging * images to fit into a certain area. * * @param {Number} srcWidth width of source image * @param {Number} srcHeight height of source image * @param {Number} maxWidth maximum available width * @param {Number} maxHeight maximum available height * @return {Object} { width, height } */ function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) { var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight); return { width: srcWidth*ratio, height: srcHeight*ratio }; } 

Se capisco correttamente la domanda, non hai nemmeno bisogno di jQuery per questo. Ridurre l’immagine proporzionalmente sul client può essere fatto con il solo CSS: basta impostare la max-width max-height al 100% .

 

Ecco il violino: http://jsfiddle.net/9EQ5c/

Per determinare le proporzioni , devi avere un rapporto a cui mirare.

Altezza

 function getHeight(length, ratio) { var height = ((length)/(Math.sqrt((Math.pow(ratio, 2)+1)))); return Math.round(height); } 

Larghezza

 function getWidth(length, ratio) { var width = ((length)/(Math.sqrt((1)/(Math.pow(ratio, 2)+1)))); return Math.round(width); } 

In questo esempio utilizzo 16:10 poiché questo è il tipico rapporto di aspetto del monitor.

 var ratio = (16/10); var height = getHeight(300,ratio); var width = getWidth(height,ratio); console.log(height); console.log(width); 

I risultati da sopra sarebbero 147 e 300

in realtà mi sono imbattuto in questo problema e la soluzione che ho trovato era stranamente semplice e strana

 $("#someimage").css({height:}) 

e miracolosamente l’immagine viene ridimensionata alla nuova altezza e conservando lo stesso rapporto!

aiuto?

Il browser si prenderà cura di mantenere intatto il rapporto d’aspetto.

vale a dire che la max-width triggersta quando la larghezza dell’immagine è maggiore dell’altezza e la sua altezza verrà calcasting proporzionalmente. Allo stesso modo l’ max-height sarà effettiva quando l’altezza è maggiore della larghezza.

Non hai bisogno di jQuery o javascript per questo.

Supportato da ie7 + e altri browser ( http://caniuse.com/minmaxwh ).

Ci sono 4 parametri per questo problema

  1. larghezza immagine attuale iX
  2. altezza dell’immagine attuale iY
  3. target viewport width cX
  4. target viewport height cY

E ci sono 3 diversi parametri condizionali

  1. cX> cY?
  2. iX> cX?
  3. IY> cY?

soluzione

  1. Trova il lato più piccolo della porta di visualizzazione objective F
  2. Trova il lato più grande della porta di visualizzazione corrente L
  3. Trova il fattore di entrambi i fattori F / L =
  4. Moltiplicare entrambi i lati della porta corrente con il fattore ie, fattore fX = iX *; Fattore = IY * fattore

questo è tutto ciò che devi fare

 //Pseudo code iX;//current width of image in the client iY;//current height of image in the client cX;//configured width cY;//configured height fX;//final width fY;//final height 1. check if iX,iY,cX,cY values are >0 and all values are not empty or not junk 2. lE = iX > iY ? iX: iY; //long edge 3. if ( cX < cY ) then 4. factor = cX/lE; else 5. factor = cY/lE; 6. fX = iX * factor ; fY = iY * factor ; 

Questo è un forum maturo, non ti sto dando il codice per questo 🙂

Questo dovrebbe funzionare per le immagini con tutte le possibili proporzioni

 $(document).ready(function() { $('.list img').each(function() { var maxWidth = 100; var maxHeight = 100; var width = $(this).width(); var height = $(this).height(); var ratioW = maxWidth / width; // Width ratio var ratioH = maxHeight / height; // Height ratio // If height ratio is bigger then we need to scale height if(ratioH > ratioW){ $(this).css("width", maxWidth); $(this).css("height", height * ratioW); // Scale height according to width ratio } else{ // otherwise we scale width $(this).css("height", maxHeight); $(this).css("width", height * ratioH); // according to height ratio } }); }); 
 $('#productThumb img').each(function() { var maxWidth = 140; // Max width for the image var maxHeight = 140; // Max height for the image var ratio = 0; // Used for aspect ratio var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if the current width is larger than the max if(width > height){ height = ( height / width ) * maxHeight; } else if(height > width){ maxWidth = (width/height)* maxWidth; } $(this).css("width", maxWidth); // Set new width $(this).css("height", maxHeight); // Scale height based on ratio }); 

Se l’immagine è proporzionata, questo codice riempirà l’immagine con il wrapper. Se l’immagine non è in proporzione, la larghezza / altezza extra verrà ritagliata.

   

Senza ulteriori valori temporanei o parentesi.

  var width= $(this).width(), height= $(this).height() , maxWidth=100, maxHeight= 100; if(width > maxWidth){ height = Math.floor( maxWidth * height / width ); width = maxWidth } if(height > maxHeight){ width = Math.floor( maxHeight * width / height ); height = maxHeight; } 

Tieni presente che ai motori di ricerca non piace, se l’attributo larghezza e altezza non si adatta all’immagine, ma non conoscono JS.

Dopo alcune prove ed errori sono arrivato a questa soluzione:

 function center(img) { var div = img.parentNode; var divW = parseInt(div.style.width); var divH = parseInt(div.style.height); var srcW = img.width; var srcH = img.height; var ratio = Math.min(divW/srcW, divH/srcH); var newW = img.width * ratio; var newH = img.height * ratio; img.style.width = newW + "px"; img.style.height = newH + "px"; img.style.marginTop = (divH-newH)/2 + "px"; img.style.marginLeft = (divW-newW)/2 + "px"; } 

Il ridimensionamento può essere raggiunto (mantenendo le proporzioni) usando CSS. Questa è un’ulteriore risposta semplificata ispirata al post di Dan Dascalescu.

http://jsbin.com/viqare

 img{ max-width:200px; /*Or define max-height*/ } 
 Alastair Cook Usman Khawaja 

Ecco una correzione alla risposta di Mehdiway. La nuova larghezza e / o altezza non venivano impostate sul valore massimo. Un buon test case è il seguente (1768 x 1075 pixel): http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png . (Non sono stato in grado di commentarlo sopra a causa della mancanza di punti reputazione).

  // Make sure image doesn't exceed 100x100 pixels // note: takes jQuery img object not HTML: so width is a function // not a property. function resize_image (image) { var maxWidth = 100; // Max width for the image var maxHeight = 100; // Max height for the image var ratio = 0; // Used for aspect ratio // Get current dimensions var width = image.width() var height = image.height(); console.log("dimensions: " + width + "x" + height); // If the current width is larger than the max, scale height // to ratio of max width to current and then set width to max. if (width > maxWidth) { console.log("Shrinking width (and scaling height)") ratio = maxWidth / width; height = height * ratio; width = maxWidth; image.css("width", width); image.css("height", height); console.log("new dimensions: " + width + "x" + height); } // If the current height is larger than the max, scale width // to ratio of max height to current and then set height to max. if (height > maxHeight) { console.log("Shrinking height (and scaling width)") ratio = maxHeight / height; width = width * ratio; height = maxHeight; image.css("width", width); image.css("height", height); console.log("new dimensions: " + width + "x" + height); } } 

Dai un’occhiata a questo pezzo …

 /** * @param {Number} width * @param {Number} height * @param {Number} destWidth * @param {Number} destHeight * * @return {width: Number, height:Number} */ function resizeKeepingRatio(width, height, destWidth, destHeight) { if (!width || !height || width < = 0 || height <= 0) { throw "Params error"; } var ratioW = width / destWidth; var ratioH = height / destHeight; if (ratioW <= 1 && ratioH <= 1) { var ratio = 1 / ((ratioW > ratioH) ? ratioW : ratioH); width *= ratio; height *= ratio; } else if (ratioW > 1 && ratioH < = 1) { var ratio = 1 / ratioW; width *= ratio; height *= ratio; } else if (ratioW <= 1 && ratioH > 1) { var ratio = 1 / ratioH; width *= ratio; height *= ratio; } else if (ratioW >= 1 && ratioH >= 1) { var ratio = 1 / ((ratioW > ratioH) ? ratioW : ratioH); width *= ratio; height *= ratio; } return { width : width, height : height }; } 

2 passaggi:

Passaggio 1) calcola il rapporto tra la larghezza originale / l’altezza originale dell’immagine.

Passaggio 2) moltiplicare il rapporto original_width / original_height per la nuova altezza desiderata per ottenere la nuova larghezza corrispondente alla nuova altezza.

Questo ha funzionato perfettamente per me per un object trascinabile – aspectRatio: true

 .appendTo(divwrapper).resizable({ aspectRatio: true, handles: 'se', stop: resizestop })