jQuery cambiar el tamaño a la relación de aspecto

Question

Cómo cambiaría el tamaño de una imagen en jQuery a una relación de aspecto consistente. Por ejemplo, establecer la altura máxima y cambiar el ancho de la anchura correctamente. Gracias.

Answer 1

Se podría calcular de forma manual,

es decir .:

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

Asegúrese de que utiliza los valores originales de la imagen de lo contrario se degradan con el tiempo.

EDIT: ejemplo, la versión de jQuery (no probado)

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

Uso JQueryUI Resizeable

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

aspectRatio: true -> mantener la relación de aspecto original

Answer 3

He aquí una función útil que podría hacer lo usted quiere:

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'}); 
    }); 
}; 

Básicamente, toma un elemento, lo centra dentro del elemento principal y luego lo estira para que no quede visible el fondo de ninguno de los padres, mientras mantiene la relación de aspecto.

Por otra parte, esto podría no ser lo que desea hacer.

Answer 4

No existe una explicación de la cantidad de copias y empanadas que hay por ahí eh! También quería saber esto y todo lo que vi fueron ejemplos interminables de ancho de escala O altura ... ¿quién querría que el otro se desborde?

• ancho de cambiar el tamaño y altura sin la necesidad de un bucle
• no sea superior a las imágenes dimensiones originales
• Usos matemáticas que funciona correctamente es decir, la anchura/altura de aspecto, y la altura * aspecto de ancho para que las imágenes son en realidad las proporciones adecuadas de arriba a abajo:/

debe ser recta hacia adelante lo suficiente como para convertir a JavaScript u otros lenguajes

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

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; 
}