jQuery ridimensionamento proporzioni

Question

Come ridimensionare un'immagine in jQuery con proporzioni coerenti. Ad esempio, imposta l'altezza massima e ridimensiona la larghezza correttamente. Grazie.

Answer 1

Si potrebbe calcolare questo manualmente,

cioè .:

function GetWidth(newHeight,orginalWidth,originalHeight) 
{ 
if(currentHeight == 0)return newHeight; 
var aspectRatio = currentWidth/currentHeight; 
return newHeight * aspectRatio; 
} 

assicurarsi di utilizzare i valori originali per l'immagine altrimenti si degrada nel tempo.

EDIT: ad esempio la versione jQuery (non testato)

jQuery.fn.resizeHeightMaintainRatio = function(newHeight){ 
    var aspectRatio = $(this).data('aspectRatio'); 
    if (aspectRatio == undefined) { 
     aspectRatio = $(this).width()/$(this).height(); 
     $(this).data('aspectRatio', aspectRatio); 
    } 
    $(this).height(newHeight); 
    $(this).width(parseInt(newHeight * aspectRatio)); 
} 

Answer 2

Usa JQueryUI Resizeable

$("#some_image").resizable({ aspectRatio:true, maxHeight:300 }); 

aspectRatio: true -> mantenere proporzioni originali

Answer 3

Ecco una funzione utile che potrebbe fare quello vuoi:

jQuery.fn.fitToParent = function() 
{ 
    this.each(function() 
    { 
     var width = $(this).width(); 
     var height = $(this).height(); 
     var parentWidth = $(this).parent().width(); 
     var parentHeight = $(this).parent().height(); 

     if(width/parentWidth < height/parentHeight) { 
      newWidth = parentWidth; 
      newHeight = newWidth/width*height; 
     } 
     else { 
      newHeight = parentHeight; 
      newWidth = newHeight/height*width; 
     } 
     var margin_top = (parentHeight - newHeight)/2; 
     var margin_left = (parentWidth - newWidth)/2; 

     $(this).css({'margin-top' :margin_top + 'px', 
        'margin-left':margin_left + 'px', 
        'height'  :newHeight + 'px', 
        'width'  :newWidth + 'px'}); 
    }); 
}; 

Fondamentalmente, afferra un elemento, lo centra all'interno del genitore, quindi lo allunga per adattarlo in modo tale che nessuno dello sfondo del genitore sia visibile, pur mantenendo le proporzioni.

Quindi, di nuovo, questo potrebbe non essere quello che vuoi fare.

Answer 4

Non c'è contabilità per la quantità di copia e di pastori là fuori eh! Volevo anche sapere questo e tutti quelli che ho visto erano infiniti esempi di larghezza di scala O altezza ... chi vorrebbe che l'altro traboccasse ?!

• larghezza ridimensionare e altezza senza la necessità di un ciclo
• non superi le immagini dimensioni originarie
• Utilizzi la matematica che funziona correttamente cioè larghezza/aspetto in altezza, e l'altezza * aspetto di larghezza in modo immagini sono in realtà in scala correttamente su e giù:/

deve essere dritta abbastanza avanti per convertire in JavaScript o altre lingue

//////////////

private void ResizeImage(Image img, double maxWidth, double maxHeight) 
{ 
    double srcWidth = img.Width; 
    double srcHeight = img.Height; 

    double resizeWidth = srcWidth; 
    double resizeHeight = srcHeight; 

    double aspect = resizeWidth/resizeHeight; 

    if (resizeWidth > maxWidth) 
    { 
     resizeWidth = maxWidth; 
     resizeHeight = resizeWidth/aspect; 
    } 
    if (resizeHeight > maxHeight) 
    { 
     aspect = resizeWidth/resizeHeight; 
     resizeHeight = maxHeight; 
     resizeWidth = resizeHeight * aspect; 
    } 

    img.Width = resizeWidth; 
    img.Height = resizeHeight; 
}